<script lang="ts">
	import { addNotification } from "@ibcornelsen/ui";
	import { api } from "astro-typesafe-api/client";
	import { CrossCircled, CheckCircled } from "radix-svelte-icons";
	import { fade } from "svelte/transition";

	let email: string;

	export let redirect: string | null = null;

	async function sendPasswordMail(e: SubmitEvent) {
		e.preventDefault()
		try {
			sent = true
			const response = await api.auth["passwort-vergessen"].GET.fetch({
				email
			})

			showEmailSuccess = true;
		} catch (e) {
			sent = false;
			addNotification({
				message: "Ups...",
				subtext: "Da ist wohl etwas schiefgelaufen... Bitte versuchen sie es erneut, falls das Problem weiterhin bestehen sollte melden sie sich bei unserem Support damit wir ihnen helfen können.",
				type: "error",
				timeout: 0,
				dismissable: true
			})
		}
	}

	let showEmailSuccess = false;
	let sent = false;
</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">Passwort Vergessen?</h1>
	<form class="flex flex-col gap-4" on:submit={sendPasswordMail}>
		<p>Kein Problem. Wir helfen ihnen dabei ihr Passwort zurückzusetzen. Geben sie einfach die Email Adresse ihres Kontos ein und wir senden ihnen einen Link zu, mit dem sie ihr Passwort ändern können.</p>
		<input
			type="text"
			placeholder="Email"
			name="email"
			class="input input-bordered text-base text-base-content font-medium"
			bind:value={email}
			required
		/>
		{#if showEmailSuccess}
		<div role="alert" class="flex bg-green-400 bg-opacity-25 border-green-600 border items-center gap-4 px-4 py-2 rounded-lg" in:fade>
			<CheckCircled size={24} />
			<span class="font-semibold">Falls sie ein Konto bei uns haben wurde eine Email an sie verschickt.</span>
		</div>
		{/if}
		<button type="submit" class="button" disabled={sent}
				>Email zum Zurücksetzen des Passworts senden.</button
			>
		{#if showEmailSuccess}
		<div class="flex-row justify-between" style="margin-top: 10px">
			<a class="link link-hover"
				href="/auth/login{redirect ? `?redirect=${redirect}` : ""}">Einloggen</a
			>
		</div>
		{/if}
	</form>
</div>