<script context="module" lang="ts">
    export type Message =
        | "after-password-reset"
        | "user-inactivity"
        | "user-disabled";
</script>

<script lang="ts">
    import { goto } from "$app/navigation";
    import { login } from "$lib/api/user";
    import Button from "$lib/components/button.svelte";
    import Checkbox from "$lib/components/checkbox.svelte";
    import Input from "$lib/components/input.svelte";
    import LL from "$lib/i18n/i18n-svelte";
    import type { ErrorResult } from "$lib/models/ErrorResult";
    import type { LoginPayload } from "$lib/models/LoginPayload";

    let loading = false;

    const data = {
        username: "",
        password: "",
    } as LoginPayload;

    let error = {
        text: "",
        title: "",
    } as ErrorResult;

    async function submitFormAsync() {
        error = { text: "", title: "" };
        loading = true;
        const loginResponse = await login(data);
        if (loginResponse.ok) {
            await goto("/home");
        } else {
            error.title = loginResponse.data.title;
            error.text = loginResponse.data.text;
        }
        loading = false;
    }
</script>

<div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <h2
            class="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900"
        >
            {$LL.signIn()}
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600">
            {$LL.or().toLowerCase()}
            <a href="/sign-up" class="link">{$LL.createANewAccount()}</a>
        </p>
    </div>
    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            {#if error.text || error.title}
                <div class="rounded-md bg-red-50 p-3 mb-3">
                    {#if error.title}
                        <h3 class="text-sm font-medium text-red-600">
                            {error.title}
                        </h3>
                    {/if}
                    {#if error.text}
                        <div class="mt-2 text-sm text-red-500">
                            {error.text}
                        </div>
                    {/if}
                </div>
            {/if}
            <form class="space-y-6" on:submit|preventDefault={submitFormAsync}>
                <Input
                    id="email"
                    name="email"
                    type="email"
                    label={$LL.emailAddress()}
                    required
                    value={data.username}
                />

                <Input
                    id="password"
                    name="password"
                    type="password"
                    label={$LL.password()}
                    autocomplete="current-password"
                    required
                    value={data.password}
                />

                <div class="flex items-center justify-between">
                    <Checkbox
                        id="remember-me"
                        name="remember-me"
                        label={$LL.notMyComputer()}
                    />
                    <div class="text-sm">
                        <a href="/reset-password" class="link">
                            {$LL.resetPassword()}
                        </a>
                    </div>
                </div>

                <Button text={$LL.signIn()} fullWidth type="submit" {loading} />
            </form>
        </div>
    </div>
</div>
