<script context="module" lang="ts">
    export enum Message {
        AFTER_PASSWORD_RESET = "after-password-reset",
        USER_INACTIVITY = "user-inactivity",
        USER_DISABLED = "user-disabled",
    }
    export const messageQueryKey = "m";
</script>

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

    let loading = false;
    let messageType: Message | undefined = undefined;

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

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

    onMount(() => {
        const searcher = new URLSearchParams(window.location.search);
        if (searcher.get(messageQueryKey)) {
            messageType = searcher.get(messageQueryKey) as Message;
            searcher.delete(messageQueryKey);
            history.replaceState(
                null,
                "",
                window.location.origin + window.location.pathname
            );
        }
    });

    async function submitFormAsync() {
        error = { text: "", title: "" };
        loading = true;
        data.persist = !data.persist;
        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">
    {#if messageType}
        <div class="sm:max-w-md sm:mx-auto sm:w-full">
            {#if messageType === "after-password-reset"}
                <Alert
                    title={$LL.signInPage.yourNewPasswordIsApplied()}
                    message={$LL.signInPage.signInBelow()}
                    closeable
                />
            {:else if messageType === "user-disabled"}
                <Alert
                    title={$LL.signInPage.yourAccountIsDisabled()}
                    message={$LL.signInPage.contactYourAdminIfDisabled()}
                    closeable
                />
            {:else if messageType === "user-inactivity"}
                <Alert
                    title={$LL.signInPage.youHaveReachedInactivityLimit()}
                    message={$LL.signInPage.feelFreeToSignInAgain()}
                    closeable
                />
            {/if}
        </div>
    {/if}
    <div class="sm:mx-auto sm:w-full p-2 sm:p-0 sm:max-w-md">
        <h2 class="mt-6 text-3xl tracking-tight font-bold text-gray-900">
            {$LL.signInPage.signIn()}
        </h2>
        <p class="mt-2 text-sm text-gray-600">
            {$LL.or().toLowerCase()}
            <a href="/sign-up" class="link"
                >{$LL.createANewAccount().toLowerCase()}</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
                    bind:value={data.username}
                />

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

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

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