class LedCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <style>
        :host{display:block}section{height:100%;box-sizing:border-box}.rangeRow{display:flex;gap:12px;align-items:center}.rangeRow input{flex:1}.rangeRow output{min-width:3ch;text-align:right;font-weight:650}
      </style>
      <section>
        <h3>LED</h3>
        <label>Brightness</label>
        <div class="rangeRow"><input id="brightness" type="range" min="0" max="100" value="0"><output id="value">0</output></div>
        <button id="apply">Apply</button>
        <pre id="out"></pre>
      </section>`;
    this.brightness = this.querySelector('#brightness');
    this.value = this.querySelector('#value');
    this.brightness.addEventListener('input', () => this.value.value = this.brightness.value);
    this.querySelector('#apply').addEventListener('click', () => this.setLed());
    window.addEventListener('app:settings-loaded', event => this.applySettings(event.detail.settings));
  }

  applySettings(settings) {
    if (!settings || settings.ledBrightness === undefined) return;
    this.brightness.value = settings.ledBrightness;
    this.value.value = settings.ledBrightness;
  }

  async setLed() {
    this.querySelector('#out').textContent = await window.App.req('POST', '/api/led', {brightness: +this.brightness.value});
  }
}

customElements.define('led-card', LedCard);