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

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

	import Button from '$lib/components/ui/Button.svelte';
	import Input from '$lib/components/ui/Input.svelte';

	import plausible from '$lib/stores/Plausible';

	$: user = $page.data.user;

	export let form: ActionData;

	$: optedOut = $plausible;
</script>

<form class="flex flex-col gap-4" method="POST" use:enhance>
	<label for="email">Email</label>
	<Input
		name="email"
		type="email"
		placeholder="philipzcwbarlow@peerat.dev"
		value={user?.email}
		disabled
	/>

	<label for="firstname">Prénom</label>
	<Input name="firstname" type="text" placeholder="Philip" value={user?.firstname} />

	<label for="lastname">Nom</label>
	<Input name="lastname" type="text" placeholder="Barlow" value={user?.lastname} />

	<label for="pseudo"> Nom d'utilisateur </label>
	<Input name="pseudo" type="text" placeholder="Cypher Wolf" value={user?.pseudo} />

	<label for="description"> Description </label>
	<Input
		name="description"
		placeholder="Je serai le plus grand pirate de l'espace"
		type="text"
		value={user?.description}
	/>

	<!-- TODO -->

	<div class="flex items-center justify-between">
		<label for="optout"> Ne pas me tracer de manière anonyme </label>
		<input
			class="h-4 w-4"
			name="optout"
			type="checkbox"
			value={optedOut}
			on:change={() => plausible.set(!optedOut)}
			checked={optedOut}
		/>
	</div>
	<p class="text-sm text-highlight-secondary">
		Nous utilisons Plausible pour analyser l'utilisation de notre site web de manière anonyme.
	</p>

	<Button variant="brand">
		<!-- {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} -->
		Modifier
	</Button>
</form>
