<script lang="ts">
	import { enhance } from '$app/forms';

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

	import Button from '$lib/components/ui/Button.svelte';
	import Input from '$lib/components/ui/Input.svelte';
	import { fade } from 'svelte/transition';

	export let form: ActionData;

	let data = {
		email: '',
		firstname: '',
		lastname: '',
		pseudo: '',
		confirmation: false
	};

	export const snapshot: Snapshot = {
		capture: () => data,
		restore: (value) => (data = 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">
				{data.confirmation ? 'Confirmation' : 'Inscription'}
			</h2>
			<form
				class="flex flex-col justify-center gap-2"
				method="POST"
				use:enhance={({}) => {
					return async ({ result }) => {
						switch (result.type) {
							case 'success':
								data.confirmation = true;
								break;
						}
					};
				}}
				action={data.confirmation ? '/sign-up?/confirmation' : '/sign-up?/confirmation'}
			>
				<label for="email">Email</label>
				<Input
					bind:value={data.email}
					name="email"
					type="email"
					placeholder="philipzcwbarlow@peerat.dev"
					autocomplete="off"
					required
				/>
				{#if form?.errors?.find((error) => error.field === 'email')}
					<p class="text-sm text-red-500">
						{form?.errors.find((error) => error.field === 'email')?.message}
					</p>
				{/if}

				<label for="firstname">Prénom</label>
				<Input
					bind:value={data.firstname}
					name="firstname"
					type="text"
					placeholder="Philip"
					autocomplete="off"
					required
				/>
				{#if form?.errors?.find((error) => error.field === 'firstname')}
					<p class="text-sm text-red-500">
						{form?.errors?.find((error) => error.field === 'firstname')?.message}
					</p>
				{/if}

				<label for="lastname">Nom</label>
				<Input
					bind:value={data.lastname}
					name="lastname"
					type="text"
					placeholder="Barlow"
					autocomplete="off"
					required
				/>
				{#if form?.errors?.find((error) => error.field === 'lastname')}
					<p class="text-sm text-red-500">
						{form?.errors?.find((error) => error.field === 'lastname')?.message}
					</p>
				{/if}

				<label for="pseudo"> Nom d'utilisateur </label>
				<Input
					bind:value={data.pseudo}
					name="pseudo"
					type="text"
					placeholder="Cypher Wolf"
					autocomplete="off"
					required
				/>
				{#if form?.errors?.find((error) => error.field === 'pseudo')}
					<p class="text-sm text-red-500">
						{form?.errors?.find((error) => error.field === 'pseudo')?.message}
					</p>
				{/if}

				{#if data.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" />
						{#if form?.errors?.find((error) => error.field === 'passwd')}
							<p class="text-sm text-red-500">
								{form?.errors?.find((error) => error.field === 'passwd')?.message}
							</p>
						{/if}
						<label for="code"> Code </label>
						<Input name="code" placeholder="1234" type="text" />
						{#if form?.errors?.find((error) => error.field === 'code')}
							<p class="text-sm text-red-500">
								{form?.errors?.find((error) => error.field === 'code')?.message}
							</p>
						{/if}
					</div>
				{/if}

				<Button class="mt-2" variant="brand">
					<!-- {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} -->
					{data.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 data.confirmation}
						<li>
							<button
								formaction="/sign-up?/confirmation"
								class="text-highlight-secondary hover:text-brand">Pas reçu ?</button
							>
						</li>
					{/if}
				</ul>
			</form>
		</div>
	</div>
</div>
