---
import { Icon } from 'astro-icon/components'
import { loaderList, versionList} from '../js/modversion.js'
---

<version-dropdown>
  <div class="wrapper">
    <label for="loader-selector" class="sr-only">Select the Modloader</label>
    <select
      name="loader-selector"
      id="loader-selector"
      class="selector cursor-pointer rounded-md pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
      aria-label="Choose the Modloader">
      { loaderList.map((loader) =>
        <option value={loader}>{loader.charAt(0).toUpperCase() + loader.replace("neoforge", "NeoForge").slice(1)}</option>
      )}
    </select>
    <label for="version-selector" class="sr-only">Select the Version</label>
    <select
      name="version-selector"
      id="version-selector"
      class="selector cursor-pointer rounded-md ml-2 pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
      aria-label="Choose the Version">
      { versionList.map((version) =>
        <option value={version}>{version}</option>
      )}
      <Icon name="ion:copy-outline"></Icon>
    </select>
  </div>
</version-dropdown>

<script>
import { getResultingVersion, setGameVersion, setLoaderVersion } from "../js/modversion";
// Define the behaviour for our new type of HTML element.
class VersionDropdown extends HTMLElement {
  connectedCallback() {
    // Get the gradle.properties code block
    const versionLabel = document.getElementById("midnightlib-version");
    // Get the 2 selectors defined above
    const loaderSelector = document.getElementById("loader-selector");
    const versionSelector = document.getElementById("version-selector");

    loaderSelector?.addEventListener("change", async (e) => {
      const {
        target: { value }, // Returns the current loader string
      } = e;

      setLoaderVersion(value);
      if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
    });
    versionSelector?.addEventListener("change", async (e) => {
      const {
        target: { value }, // Returns the current version string
      } = e;

      setGameVersion(value);
      if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
    });
  }
}
// Tell the browser to use our VersionDropdown class for <version-dropdown> elements.
customElements.define('version-dropdown', VersionDropdown);
</script>

<style lang="scss" is:global>
  #loader-selector::after {
    content: "v";
  }
  .selector:is(.darkmode *) {
    background-color: var(--dark-100);
  }
</style>
