---
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
import Checkbox from '@components/input/Checkbox.svelte';
import Input from '@components/input/Input.svelte';
import Select from '@components/input/Select.svelte';
import RulesPopup from '@app/website/signup/RulesPopup.svelte';
import Popup from '@components/popup/Popup.svelte';
import RegisteredPopup from '@app/website/signup/RegisteredPopup.svelte';
import { DISCORD_LINK, PAYPAL_LINK, START_DATE, TEAMSPEAK_LINK } from 'astro:env/server';

interface Props {
  signupDisabled?: {
    message: string;
    subMessage?: string;
  };
  signupHash?: string;
}

const { signupDisabled, signupHash } = Astro.props;
---

<WebsiteLayout title="Anmeldung" footer={false}>
  <div
    class="flex justify-center w-full min-h-screen bg-base-200"
    class:list={[signupDisabled ? 'max-h-screen overflow-hidden' : undefined]}
  >
    <div class="relative grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 my-12 bg-base-100 shadow-lg h-min">
      <h1 class="text-center text-3xl lg:text-5xl">Anmeldung</h1>
      <form id="signup" data-signup-hash={signupHash}>
        <div class="divider">Persönliche Angaben</div>
        <div class="mx-2 grid grid-cols-1 sm:grid-cols-2 gap-x-4">
          <Input
            id="firstname"
            type="text"
            label="Vorname"
            required
            validation={{
              pattern: '^\\p{L}{2,}',
              hint: 'Bitte gib Deinen vollständigen Vornamen an, dieser muss mindestens aus 2 Zeichen bestehen.'
            }}
            dynamicWidth
          />
          <Input
            id="lastname"
            type="text"
            label="Nachname"
            required
            validation={{
              pattern: '^\\p{L}{2,}',
              hint: 'Bitte gib Deinen vollständigen Nachnamen an, dieser muss mindestens aus 2 Zeichen bestehen.'
            }}
            dynamicWidth
          />
          <Input
            id="birthday"
            type="date"
            label="Geburtstag"
            required
            validation={{
              max: new Date(Date.now() - 1000 * 60 * 60 * 24 * 365 * 6).toLocaleDateString('sv-SE'),
              hint: 'Bitte gib Deinen vollständigen Geburtstag und die korrekte Jahreszahl an. Du musst mindestens 6 Jahre alt sein.'
            }}
            dynamicWidth
          >
            <span slot="notice">Die Angabe hat keine Auswirkungen auf das Spielgeschehen.</span>
          </Input>
          <Input
            id="phone"
            type="tel"
            label="Telefonnummer"
            validation={{
              pattern: '^[+\\(\\)\\s\\d]+$',
              hint: 'Bitte gib Deine vollständige Telefonnummer an, diese darf keine ungültigen Zeichen enthalten'
            }}
            dynamicWidth
          >
            <span slot="notice">
              Diese nutzen wir, um Dich in der Whatsapp-Gruppe zuzuordnen und kontaktieren zu können.
              <br />
              <b>Die Angabe ist freiwillig, hilft den Administratoren jedoch sehr!</b>
            </span>
          </Input>
        </div>
        <div class="divider">Spiel</div>
        <div class="mx-2 grid grid-cols-1 sm:grid-cols-2 gap-x-4">
          <Input id="username" type="text" label="Minecraft-Spielername" required dynamicWidth>
            <span slot="notice" class="text-[.65rem]"
              >Spielern der Bedrock-Edition wird empfohlen, ihren Microsoft-Account Namen einzugeben. Der
              Bedrock-Spielername kann nicht immer einem Minecraft Account zugeordnet werden.</span
            >
          </Input>
          <Select
            id="edition"
            values={{ java: 'Java (PC)', bedrock: 'Bedrock (Konsole und Handys)' }}
            label="Edition"
            required
            dynamicWidth
          />
        </div>
        <div class="divider"></div>
        <div class="mx-2 grid gap-y-3 mb-6">
          <Checkbox id="checkbox" required>
            <span slot="label">
              Ich bin mit der Speicherung meiner in der Anmeldung angegebenen, persönlichen Daten einverstanden. Siehe <a
                class="link"
                href="https://mhsl.eu/id.html"
                target="_blank">Datenschutz</a
              >
            </span>
          </Checkbox>
          <Checkbox id="logs" required>
            <span slot="label">
              Ich bin mit der Speicherung in Form von Logs aller meiner, beim Spielen anfallenden, persönlichen Daten
              durch den Server einverstanden
            </span>
            <span slot="notice" class="text-[.65rem]">
              Dies betrifft jede Interaktion im Spiel und zugehörige Daten wie z.B. Chatnachrichten welche vom Minecraft
              Client an den Server übermittelt werden
            </span>
          </Checkbox>
          <Checkbox id="rules" required>
            <span slot="label">
              Ich bin mit den <a class="link" onclick="">Regeln</a> einverstanden und achte sie
            </span>
          </Checkbox>
        </div>
        <button id="send-btn" class="btn btn-neutral">Anmeldung absenden</button>
      </form>
    </div>
  </div>
</WebsiteLayout>

<RulesPopup client:idle />

<Popup client:idle />

<RegisteredPopup
  client:idle
  discordLink={DISCORD_LINK}
  paypalLink={PAYPAL_LINK}
  teamspeakLink={TEAMSPEAK_LINK}
  startDate={START_DATE}
  newRegistrationAllowed={!signupHash}
/>

{
  signupDisabled && (
    <div class="absolute top-0 left-0 w-full h-full bg-black/50 backdrop-blur-sm z-10 rounded-xl flex justify-center items-center flex-col pt-20 lg:pt-0 text-2xl sm:text-4xl">
      <h1>{signupDisabled.message}</h1>
      <h3>{signupDisabled.subMessage}</h3>
    </div>
  )
}

<script>
  import { actions } from 'astro:actions';
  import { popupState } from '@components/popup/Popup.ts';
  import { rulesPopupState, rulesPopupRead } from '@app/website/signup/RulesPopup.ts';
  import { registeredPopupState } from '@app/website/signup/RegisteredPopup.ts';

  function setupClientValidation() {
    const rulesCheckbox = document.getElementById('rules') as HTMLInputElement;
    const rulesCheckboxRulesLink = rulesCheckbox.nextElementSibling!.querySelector('.link') as HTMLAnchorElement;

    // add popup state subscriber to check when the accepted button is clicked
    rulesPopupState.subscribe((value) => {
      if (value == 'accepted') rulesCheckbox.checked = true;
    });

    // add click handler to open rules popup to rules checkbox
    rulesCheckbox.addEventListener('click', (e) => {
      if (!rulesPopupRead.get()) {
        e.preventDefault();
        rulesPopupState.set('open');
      }
    });

    // add click handler to open rules popup when clicking the rules link in the rules checkbox label
    rulesCheckboxRulesLink!.addEventListener('click', () => rulesPopupState.set('open'));
  }

  function setupForm() {
    const form = document.getElementById('signup')! as HTMLFormElement;
    const sendBtn = document.getElementById('send-btn')! as HTMLButtonElement;

    // reset form on site (re-)load
    form.reset();

    const sendSignup = async () => {
      const { error } = await actions.signup.signup({
        firstname: form.firstname.value,
        lastname: form.lastname.value,
        birthday: form.birthday.value,
        phone: form.phone.value,
        username: form.username.value,
        edition: form.edition.value,
        hash: form.dataset.signupHash
      });

      if (error) {
        if (error.code == 'CONFLICT' || error.code == 'FORBIDDEN') {
          popupState.set({
            type: 'error',
            title: 'Fehler',
            message: error.message
          });
        } else {
          popupState.set({
            type: 'error',
            title: 'Fehler',
            message: error.message
          });
        }
        return;
      }

      registeredPopupState.set({
        firstname: form.firstname.value,
        lastname: form.lastname.value,
        birthday: form.birthday.value,
        phone: form.phone.value,
        username: form.username.value,
        edition: form.edition.value[0].toUpperCase() + form.edition.value.slice(1)
      });

      const cancel = registeredPopupState.subscribe((value) => {
        if (value) return;
        cancel();
        form.reset();
      });
    };

    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      sendBtn.classList.add('loading-overlay');
      await sendSignup();
      sendBtn.classList.remove('loading-overlay');
    });
  }

  const pathname = document.location.pathname;
  document.addEventListener('astro:page-load', () => {
    if (document.location.pathname !== pathname) return;

    setupClientValidation();
    setupForm();
  });
</script>
