---
import Pencil from '@assets/icons/pencil.svg';
import BaseHueInput from './BaseHueInput.astro';
import Button from './Button.astro';
import NavbarPopoverButton from './NavbarPopoverButton.astro';
import { getTheme } from '../layouts/theme';
import { getLocaleFromUrl, useTranslations } from '@i18n';

const { colorScheme } = getTheme(Astro);

const lang = getLocaleFromUrl(Astro.url);
const t = useTranslations(lang);
---

<script>
  const form = document.querySelector<HTMLFormElement>('#theme-menu form');
  const colorSchemeInputs = form?.querySelectorAll<HTMLInputElement>('[name="color-scheme"]');

  form?.addEventListener('reset', () => {
    // reset base hue inputs
    document.documentElement.dispatchEvent(
      new CustomEvent('onbasehueupdate', { detail: { value: '266' } }),
    );
    // reset html base hue preview
    document.documentElement.style.setProperty('--base-hue', '');
    // remove html color scheme (auto)
    document.documentElement.removeAttribute('data-color-scheme');
    // check auto input
    colorSchemeInputs?.forEach((c) =>
      c.value !== 'auto' ? c.removeAttribute('checked') : c.setAttribute('checked', 'true'),
    );
  });

  colorSchemeInputs?.forEach((i) =>
    i.addEventListener('change', (ev) => {
      const value = (ev.currentTarget as HTMLInputElement).value;

      // remove html color scheme
      if (value === 'auto') {
        document.documentElement.removeAttribute('data-color-scheme');
        return;
      }

      document.documentElement.dataset.colorScheme = value;
    }),
  );
</script>

<NavbarPopoverButton id="theme-menu" aria-label={t('theme-menu.label')}>
  <Pencil slot="icon" />

  <form method="post" class="theme-menu-container" action="/api/update-theme">
    <fieldset data-field="color-scheme">
      <legend>{t('theme-menu.color-scheme')}</legend>

      <div role="group">
        <label for="auto">
          <input
            type="radio"
            name="color-scheme"
            id="auto"
            value="auto"
            checked={!colorScheme ? 'checked' : undefined}
          />
          {t('theme.auto')}
        </label>

        <label for="light">
          <input
            type="radio"
            name="color-scheme"
            id="light"
            value="light"
            checked={colorScheme === 'light'}
          />
          {t('theme.light')}
        </label>

        <label for="dark">
          <input
            type="radio"
            name="color-scheme"
            id="dark"
            value="dark"
            checked={colorScheme === 'dark'}
          />
          {t('theme.dark')}
        </label>
      </div>
    </fieldset>

    <fieldset data-field="hue">
      <legend>{t('theme-menu.hue')}</legend>

      <BaseHueInput thumb-size="1rem" id="navbar-base-hue" />
    </fieldset>

    <div role="group" class="buttons">
      <Button variant="secondary" type="reset">{t('reset')}</Button>

      <Button type="submit">{t('save')}</Button>
    </div>
  </form>
</NavbarPopoverButton>

<style lang="scss">
  .theme-menu-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    padding: 0.75rem;
    min-inline-size: 250px;

    fieldset {
      border: none;

      legend {
        font-weight: 600;
        margin-inline-start: 0.5rem;
        margin-block-end: 0.25rem;
      }
    }

    [data-field='color-scheme'] [role='group'] {
      display: flex;
      background-color: var(--color-300);
      border-radius: 9rem;
      padding: 0.25rem;
      gap: 0.25rem;

      label {
        display: block;
        inline-size: 100%;
        padding-block: 0.5rem;
        border-radius: 9rem;

        text-align: center;
        cursor: pointer;
        transition: background-color 100ms;

        &:has(:checked) {
          background-color: var(--color-40);
          font-weight: 600;
        }

        &:not(:has(:checked)):hover {
          background-color: var(--color-200);
        }

        &:has(input:focus-visible) {
          box-shadow:
            0 0 0 2px var(--color-40),
            0 0 0 4px var(--color-900);
        }
      }

      input {
        position: fixed;
        inline-size: 1px;
        block-size: 1px;
        top: -1px;
        left: -1px;
      }
    }

    .buttons {
      display: flex;
      gap: 0.25rem;
      inline-size: 100%;
      justify-content: end;
    }
  }
</style>