<script lang="ts">
	import { createEventDispatcher, onMount } from 'svelte';
	import { env } from '$env/dynamic/public';
	import Input from '$lib/components/Input/Input.svelte';
	import Select from '$lib/components/Input/Select.svelte';

	export let firstname: string;
	export let lastname: string;
	export let birthday: Date;
	export let phone: string | null;
	export let username: string;
	export let edition: string;

	const dispatch = createEventDispatcher();

	let startDayOptions: Intl.DateTimeFormatOptions = {
		day: '2-digit',
		month: 'long',
		year: 'numeric'
	};
	let startTimeOptions: Intl.DateTimeFormatOptions = {
		hour: '2-digit',
		minute: '2-digit'
	};
	let skin: string | null = null;

	onMount(async () => {
		let skinview3d = await import('skinview3d');
		let 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/${username}`);
		skinViewer.render();
		skin = skinViewer.canvas.toDataURL();

		skinViewer.dispose();
	});
</script>

<h1 class="text-center text-xl sm:text-3xl mb-8">Registrierung erfolgreich</h1>
<p>
	<b>Du hast Dich erfolgreich für Craftattack 6 registriert</b>. Spielstart ist am
	<span class="underline"
		>{new Date(env.PUBLIC_START_DATE).toLocaleString('de-DE', startDayOptions)}</span
	>
	um
	<span class="underline"
		>{new Date(env.PUBLIC_START_DATE).toLocaleString('de-DE', startTimeOptions)} Uhr</span
	>.
</p>
<p>Alle weiteren Informationen werden in der Whatsapp-Gruppe bekannt gegeben.</p>
<div class="divider" />
<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 value={firstname} size="sm" readonly><span slot="label">Vorname</span></Input>
		<Input value={lastname} size="sm" readonly><span slot="label">Nachname</span></Input>
		<Input value={birthday.toISOString().substring(0, 10)} type="date" size="sm" readonly
			><span slot="label">Geburtstag</span></Input
		>
		<Input value={phone} size="sm" readonly><span slot="label">Telefonnummer</span></Input>
		<Input value={username} size="sm" readonly><span slot="label">Spielername</span></Input>
		<Select value="edition" size="sm" disabled label="Edition">
			<option value="edition">{edition}</option>
		</Select>
	</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" />
		{/if}
	</div>
</div>
<div class="divider" />
<div class="flex justify-center gap-8">
	<button class="btn" on:click={() => dispatch('close')}>Weitere Person anmelden</button>
</div>
