---
const { class: providedClasses, selectClass, optionClass } = Astro.props;
---

<theme-selector class:list={[providedClasses]}></theme-selector>
<script is:inline define:vars={{ selectClass, optionClass }}>
  if (!customElements.get("theme-selector")) {
    customElements.define(
      "theme-selector",
      class extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `
            <select name="theme-select" class=${selectClass}>
              <option value="auto" class=${optionClass}>Auto</option>
              <option value="light" class=${optionClass}>Light</option>
              <option value="dark" class=${optionClass}>Dark</option>
            </select>
          `;
          this.querySelector("select").onchange = (event) =>
            theme.setTheme(event.target.value);
          this.setAttribute("aria-label", "Select Theme");
          this.updateSelectedTheme();

          document.addEventListener("theme-changed", (event) => {
            this.updateSelectedTheme(event.detail.theme);
          });
        }

        updateSelectedTheme(newTheme = theme.getTheme()) {
          this.querySelector("select").value = newTheme;
        }
      }
    );
  }
</script>