<script lang="ts">
	import { fade } from 'svelte/transition';
	import { superForm } from 'sveltekit-superforms/client';
	import { Loader2 } from 'lucide-svelte';

	import type { PageData, Snapshot } from './$types';

	import Button from '$lib/components/ui/Button.svelte';
	import Input from '$lib/components/ui/Input.svelte';
	import { addToast } from '$lib/components/Toaster.svelte';

	export let data: PageData;

	let submitting = false;
	let confirmation = false;

	const { form, errors, enhance } = superForm(data.form, {
		onSubmit() {
			submitting = true;
		},
		onResult({ result }) {
			switch (result.type) {
				case 'success':
					addToast({
						data: {
							title: 'Demande de confirmation',
							description: `Un code vous à été ${confirmation ? 'renvoyé' : 'envoyé'}.`
						}
					});
					confirmation = true;
					break;
				case 'error':
					confirmation = false;
					break;
			}

			submitting = false;
		}
	});

	export const snapshot: Snapshot = {
		capture: () => confirmation,
		restore: (value) => (confirmation = value)
	};
</script>

<div class="flex h-screen w-full">
	<div class="flex w-full flex-col items-center justify-center">
		<div class="flex w-full max-w-xs flex-col gap-4">
			<h2 class="mx-auto text-xl font-bold">
				{confirmation ? 'Confirmation' : 'Inscription'}
			</h2>
			<form
				class="flex flex-col justify-center gap-2"
				method="POST"
				action={confirmation ? '?/confirmation' : '?/register'}
				use:enhance
			>
				<label for="email">Email</label>
				<Input
					bind:value={$form.email}
					name="email"
					type="email"
					placeholder="philipzcwbarlow@peerat.dev"
					autocomplete="off"
					required
					aria-invalid={$errors.email ? 'true' : undefined}
				/>
				{#if $errors.email}<span class="text-sm text-red-500">{$errors.email}</span>{/if}

				<label for="firstname">Prénom</label>
				<Input
					bind:value={$form.firstname}
					name="firstname"
					type="text"
					placeholder="Philip"
					autocomplete="off"
					required
					aria-invalid={$errors.firstname ? 'true' : undefined}
				/>
				{#if $errors.firstname}<span class="text-sm text-red-500">{$errors.firstname}</span>{/if}

				<label for="lastname">Nom</label>
				<Input
					bind:value={$form.lastname}
					name="lastname"
					type="text"
					placeholder="Barlow"
					autocomplete="off"
					required
					aria-invalid={$errors.lastname ? 'true' : undefined}
				/>
				{#if $errors.lastname}<span class="text-sm text-red-500">{$errors.lastname}</span>{/if}

				<label for="pseudo"> Nom d'utilisateur </label>
				<Input
					bind:value={$form.pseudo}
					name="pseudo"
					type="text"
					placeholder="Cypher Wolf"
					autocomplete="off"
					required
					aria-invalid={$errors.pseudo ? 'true' : undefined}
				/>
				{#if $errors.pseudo}<span class="text-sm text-red-500">{$errors.pseudo}</span>{/if}

				{#if confirmation}
					<div
						class="flex flex-col gap-2"
						transition:fade={{
							duration: 300
						}}
					>
						<label for="passwd"> Mot de passe </label>
						<Input
							name="passwd"
							placeholder="************"
							type="password"
							aria-invalid={$errors.passwd ? 'true' : undefined}
						/>
						{#if $errors.passwd}<span class="text-sm text-red-500">{$errors.passwd}</span>{/if}

						<label for="code"> Code </label>
						<Input
							name="code"
							placeholder="1234"
							type="text"
							aria-invalid={$errors.code ? 'true' : undefined}
						/>
						{#if $errors.code}<span class="text-sm text-red-500">{$errors.code}</span>{/if}
					</div>
				{/if}

				<Button class="mt-2 flex items-center gap-2" variant="brand" disabled={submitting}>
					{#if submitting}
						<Loader2 className="h-4 w-4 animate-spin" />
					{/if}
					{confirmation ? "S'inscrire" : 'Continuer'}
				</Button>

				<ul class="flex justify-between">
					<li>
						<a class="text-highlight-secondary hover:text-brand" href="/sign-in">Se connecter</a>
					</li>
					{#if confirmation}
						<li>
							<button formaction="?/register" class="text-highlight-secondary hover:text-brand">
								Pas reçu ?
							</button>
						</li>
					{/if}
				</ul>
			</form>
		</div>
	</div>
</div>
