<script lang="ts">
	import Input from '$lib/components/Input/Input.svelte';
	import { env } from '$env/dynamic/public';
	import { goto } from '$app/navigation';
	import { errorMessage } from '$lib/stores';

	let passwordValue: string;
	async function login() {
		// eslint-disable-next-line no-async-promise-executor
		loginRequest = new Promise(async (resolve) => {
			const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/login`, {
				method: 'POST',
				body: new FormData(document.forms[0])
			});
			if (response.ok) {
				await goto(`${env.PUBLIC_BASE_PATH}/admin`, { invalidateAll: true });
				resolve();
			} else if (response.status == 401) {
				passwordValue = '';
				$errorMessage = 'Nutzername oder Passwort falsch';
				resolve();
			} else {
				$errorMessage = `${response.statusText} (${response.status})`;
			}
			loginRequest = null;
		});
	}

	let loginRequest: Promise<void> | null = null;
</script>

<div class="card px-14 py-6 shadow-lg">
	<h1 class="text-center text-4xl mt-2 mb-4">Craftattack Admin Login</h1>
	<form class="flex flex-col items-center" on:submit|preventDefault={login}>
		<div class="flex flex-col justify-center items-center">
			<div class="grid gap-4">
				<Input id="username" name="username" type="text" required={true}>
					<span slot="label">Nutzername</span>
				</Input>
				<Input
					id="password"
					name="password"
					type="password"
					required={true}
					bind:value={passwordValue}
				>
					<span slot="label">Passwort</span>
				</Input>
			</div>
		</div>
		<div class="grid w-min mt-6">
			<div class="row-[1] col-[1]">
				<Input id="submit" type="submit" value="Login" disabled={loginRequest !== null} />
			</div>
			{#key loginRequest}
				{#if loginRequest}
					{#await loginRequest}
						<span
							class="relative top-[calc(50%-12px)] left-[calc(50%-12px)] row-[1] col-[1] loading loading-ring"
						/>
					{:catch error}
						<dialog
							class="modal"
							on:close={() => setTimeout(() => (loginRequest = null), 200)}
							open
						>
							<form method="dialog" class="modal-box">
								<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
								<h3 class="font-bold text-lg">Error</h3>
								<p class="py-4">{error.message}</p>
							</form>
							<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.2)]">
								<button>close</button>
							</form>
						</dialog>
					{/await}
				{/if}
			{/key}
		</div>
	</form>
</div>
