<script lang="ts">
	import { addNotification } from "#components/Notifications/shared.js";
	import { CrossCircled } from "radix-svelte-icons";
	import { fade } from "svelte/transition";
	import { api } from "astro-typesafe-api/client";
	import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";

	let passwort: string;
	let email: string;
	let vorname: string;
	let name: string;

	export let redirect: string | null = null;

	async function login(e: SubmitEvent) {
		e.preventDefault()
		if (passwort.length < 8) {
			addNotification({
				message: "Passwort muss mindestens 6 Zeichen enthalten.",
				dismissable: true,
				timeout: 3000,
				type: "error"
			})
			return;
		}

		try {
			const { id } = await api.user.PUT.fetch({
				email,
				passwort,
				vorname,
				name
			})

			if (redirect) {
				window.location.href = redirect
				return
			}

			window.location.href = "/auth/login";
		} catch (e) {
			errorHidden = false;
		}
	}


	let errorHidden = true;
</script>

<div class="mx-auto w-1/3 bg-base-200 p-8 border border-base-300 rounded-lg">
	<h1 class="text-3xl mb-4">Registrieren</h1>
	<form class="flex flex-col gap-4" on:submit={login}>
		<div class="flex flex-row gap-4 w-full">
			<div class="w-1/2 flex flex-col gap-2">
				<h4>Vorname</h4>
				<input
					type="text"
					placeholder="Vorname"
					name="vorname"
					class="input input-bordered text-base text-base-content font-medium"
					bind:value={vorname}
					required
				/>
			</div>
			<div class="w-1/2 flex flex-col gap-2">
				<h4>Nachname</h4>
				<input
					type="text"
					placeholder="Nachname"
					name="name"
					class="input input-bordered text-base text-base-content font-medium"
					bind:value={name}
					required
				/>
			</div>
		</div>
		<div class="flex flex-col gap-2">
			<h4>Email</h4>
			<input
				type="text"
				placeholder="Email"
				name="email"
				class="input input-bordered text-base text-base-content font-medium"
				bind:value={email}
				on:keyup={() => (email = email.toLowerCase())}
				required
			/>
		</div>
		<div class="flex flex-col gap-2">
			<h4>Passwort</h4>
			<input
				type="password"
				placeholder="********"
				minlength="8"
				name="passwort"
				class="input input-bordered text-base text-base-content font-medium"
				bind:value={passwort}
				required
			/>
		</div>
		{#if !errorHidden}
		<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
			<CrossCircled size={24} />
			<span class="font-semibold">Da ist wohl etwas schiefgelaufen. Diese Email Adresse ist bereits in Benutzung, haben sie vielleicht bereits ein Konto bei uns?</span>
		</div>
		{/if}
		<button type="submit" class="button" 
				>Registrieren</button
			>
		<div class="flex-row justify-between" style="margin-top: 10px">
			<a class="link link-hover"
				href="/auth/login{redirect ? `?redirect=${redirect}` : ""}">Einloggen</a
			>
			<a class="link link-hover" href="/auth/passwort-vergessen{redirect ? `?redirect=${redirect}` : ""}">Passwort Vergessen?</a>
		</div>
	</form>
	<NotificationWrapper></NotificationWrapper>
</div>