<script lang="ts">
	import { addNotification } from "@ibcornelsen/ui";
	import { loginClient } from "#lib/login.js";

	export let navigate: (target: string) => void;
	export let email: string;
	export let password: string;
	
	export let onLogin: (response: Awaited<ReturnType<typeof loginClient>>) => any;

	async function login(e: SubmitEvent) {
		e.preventDefault()
		const response = await loginClient(email, password)

		if (response === null) {
			addNotification({
				message: "Ups...",
				subtext: "Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?",
				type: "error",
				timeout: 6000,
				dismissable: true
			})
		} else {
			onLogin(response);
		}
	}
</script>

<form style="width:50%;margin: 0 auto" on:submit={login} name="login">
	<h1 class="text-2xl font-semibold mb-6">Einloggen</h1>
	<div class="flex flex-col gap-4">
		<div>
			<h4>Email</h4>
			<input
				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
				type="email"
				placeholder="Email"
				name="email"
				bind:value={email}
				required
			/>
		</div>
		<div>
			<h4>Passwort</h4>
			<input
				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
				type="password"
				placeholder="********"
				name="passwort"
				bind:value={password}
				required
			/>
		</div>
		<button class="button" type="submit">Einloggen</button>
		<div class="flex flex-row justify-between" style="margin-top: 10px">
			<a on:click={() => navigate("signup")} class="cursor-pointer" data-cy="registrieren">Registrieren</a>
			<a href="/user/passwort_vergessen">Passwort Vergessen?</a>
		</div>
	</div>
</form>
