<script lang="ts">
  import { registeredPopupState } from '@app/website/signup/RegisteredPopup.ts';
  import Input from '@components/input/Input.svelte';
  import { onDestroy } from 'svelte';

  interface Props {
    discordLink: string;
    paypalLink: string;
    teamspeakLink: string;
    startDate: string;
    newRegistrationAllowed: boolean;
  }

  let { discordLink, paypalLink, teamspeakLink, startDate, newRegistrationAllowed }: Props = $props();

  let skin: string | null = $state(null);

  let modal: HTMLDialogElement;

  const cancel = registeredPopupState.subscribe(async (value) => {
    if (!value) return;

    modal.show();

    const skinview3d = await import('skinview3d');
    const skinViewer = new skinview3d.SkinViewer({
      width: 200,
      height: 300,
      renderPaused: true
    });

    skinViewer.camera.rotation.x = -0.62;
    skinViewer.camera.rotation.y = 0.534;
    skinViewer.camera.rotation.z = 0.348;
    skinViewer.camera.position.x = 30.5;
    skinViewer.camera.position.y = 22.0;
    skinViewer.camera.position.z = 42.0;

    await skinViewer.loadSkin(`https://mc-heads.net/skin/${value.username}`);
    skinViewer.render();
    skin = skinViewer.canvas.toDataURL();

    skinViewer.dispose();
  });

  onDestroy(cancel);
</script>

<dialog class="modal" bind:this={modal} onclose={() => ($registeredPopupState = null)}>
  <form method="dialog" class="modal-box xl:w-5/12 max-w-10/12 z-10">
    <h1 class="text-center text-xl sm:text-3xl mb-8">Registrierung erfolgreich</h1>
    <p>
      <b>Du hast Dich erfolgreich für Craftattack 8 registriert</b>. Spielstart ist am
      <span class="underline"
        >{new Date(startDate).toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' })}</span
      >
      um
      <span class="underline"
        >{new Date(startDate).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr</span
      >.
    </p>
    <p class="text-center">Alle weiteren Informationen werden in der Whatsapp-Gruppe bekannt gegeben.</p>
    <p class="mt-2">
      Falls du uns unterstützen möchtest, kannst du dies ganz einfach über
      <a class="link" href={paypalLink} target="_blank">PayPal</a>
      tun. Antworten auf häufig gestellte Fragen findest du in unserer
      <a class="link" href="faq" target="_blank">FAQ</a>. Außerdem freuen wir uns, dich auf unserem
      <a class="link" href={teamspeakLink} target="_blank">TeamSpeak</a>
      oder in unserem
      <a class="link" href={discordLink} target="_blank">Discord</a>
      begrüßen zu dürfen!
    </p>
    <div class="divider"></div>
    <div class="flex justify-around mt-2 mb-4">
      <div class="grid grid-cols-1 sm:grid-cols-2 w-full sm:w-fit gap-x-4 gap-y-2">
        <Input type="text" value={$registeredPopupState?.firstname} label="Vorname" disabled />
        <Input type="text" value={$registeredPopupState?.lastname} label="Nachname" disabled />
        <Input type="date" value={$registeredPopupState?.birthday} label="Geburtstag" disabled />
        <Input type="tel" value={$registeredPopupState?.phone} label="Telefonnummer" disabled />
        <Input type="text" value={$registeredPopupState?.username} label="Spielername" disabled />
        <Input type="text" value={$registeredPopupState?.edition} label="Edition" disabled />
      </div>
      <div class="relative hidden md:flex justify-center w-[200px] my-4">
        {#if skin}
          <img class="absolute" src={skin} alt="" />
        {:else}
          <span class="loading loading-spinner loading-lg"></span>
        {/if}
      </div>
    </div>
    {#if newRegistrationAllowed}
      <div class="divider"></div>
      <div class="flex justify-center gap-8">
        <button class="btn">Weitere Person anmelden</button>
      </div>
    {/if}
  </form>
  <div class="absolute w-full h-full bg-black/50"></div>
</dialog>
