<script lang="ts">
	import { enhance } from '$app/forms';
	import '../../app.postcss';
	import { Input, Label, Button, Spinner, Toast } from 'flowbite-svelte';
	import { page } from '$app/stores';
	import type { PageData } from './$types';
	import { CloseCircleSolid } from 'flowbite-svelte-icons';

	export let data: PageData;
	const redirected = $page.url.searchParams.get('redirected') === 'true';
	let isLoading = false;
	let inputError: any;
	let showToast = false;

	if (redirected && data.accessToken && data.accessToken !== 'logout') {
		showToast = true;
	}

	function handleSubmit({ formData }: { formData: FormData }) {
		inputError = null;
		isLoading = true;

		return async ({ result, update }: { result: any; update: any }) => {
			await update({ reset: false });

			if (result.type !== 'success') {
				inputError = result.data.message;
				isLoading = false;
				return;
			}

			isLoading = false;
		};
	}
</script>

<div class="h-screen w-screen">
	<div class="h-max w-fit fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
		<form method="POST" use:enhance={handleSubmit}>
			<div class="mb-6">
				<Label for="text" class="mb-2">Username</Label>
				<Input type="text" id="text" placeholder="user123" name="username" required />
			</div>
			<div class="mb-6">
				<Label for="password" class="mb-2">Password</Label>
				<Input type="password" id="password" placeholder="•••••••••" name="password" required />
			</div>
			{#if inputError}<p class="text-red-600 pb-4">{inputError}</p>{/if}
			<Button type="submit">
				{#if isLoading}
					<Spinner />
				{:else}
					<p>Login</p>
				{/if}</Button
			>
		</form>
	</div>

	{#if showToast}
		<Toast color="red" position="top-right" dismissable={true}>
			<svelte:fragment slot="icon">
				<CloseCircleSolid class="w-5 h-5" />
				<span class="sr-only">Error icon</span>
			</svelte:fragment>
			Token Expired or VPN disconnected, Please Login Again!
		</Toast>
	{/if}
</div>