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

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

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

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

  let modal: HTMLDialogElement;

  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();
  });
</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 class="text-center font-bold">
      <span>Du hast Dich erfolgreich mit dem Team&nbsp;&nbsp;</span>
      <span class="inline-flex rounded-sm w-3 h-3" style="background-color: {$registeredPopupState?.teamColor}"></span>
      <span>{$registeredPopupState?.team}</span>
      <span>&nbsp;&nbsp;für Varo 4 registriert</span>. Spielstart ist am
      <i>
        {new Date(startDate).toLocaleString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' })}
      </i>
      um
      <i>
        {new Date(startDate).toLocaleString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
      </i>.
    </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.toISOString().substring(0, 10)}
          label="Geburtstag"
          size="sm"
          disabled
        />
        <Input type="tel" value={$registeredPopupState?.phone} label="Telefonnummer" disabled />
        <Input type="text" value={$registeredPopupState?.username} label="Spielername" disabled />
        <Input type="text" value={$registeredPopupState?.teamMember} label="Mitspieler" 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>
    <div class="divider"></div>
    <div class="flex justify-center gap-8">
      <button class="btn">Weitere Person anmelden</button>
    </div>
  </form>
  <div class="absolute w-full h-full bg-black/50"></div>
</dialog>
