<script lang="ts">
	import { fly } from 'svelte/transition';
	import RegistrationComplete from './RegistrationComplete.svelte';
	import Register from './Register.svelte';
	import type { PageData } from './$types';

	let registered = false;
	let firstname: string | null = null;
	let lastname: string | null = null;
	let birthday: Date | null = null;
	let phone: string | null = null;
	let username: string | null = null;
	let edition: string | null = null;

	export let data: PageData;
</script>

<svelte:head>
	<title>Craftattack - Anmeldung</title>
	<meta property="og:title" content="Craftattack - Anmeldung" />
</svelte:head>

<!--the tooltip when not all fields are correctly filled won't completely show if the overflow is hidden-->
<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"
	class:overflow-hidden={registered}
>
	{#if !data.enabled}
		<div
			class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 backdrop-blur-sm z-10 rounded-xl flex lg:justify-center items-center flex-col pt-20 lg:pt-0"
		>
			<h1 class="text-2xl sm:text-3xl md:text-5xl text-white">{data.disabled_title}</h1>
			<h3>{data.disabled_details}</h3>
		</div>
	{/if}
	{#if !registered}
		<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
			<Register
				on:submit={(e) => {
					registered = true;
					firstname = e.detail.firstname;
					lastname = e.detail.lastname;
					birthday = e.detail.birthday;
					phone = e.detail.phone;
					phone = e.detail.phone;
					username = e.detail.username;
					edition = e.detail.edition;
				}}
			/>
		</div>
	{:else}
		<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
			<RegistrationComplete
				{firstname}
				{lastname}
				{birthday}
				{phone}
				{username}
				{edition}
				on:close={() => (registered = false)}
			/>
		</div>
	{/if}
</div>
