<script lang="ts">
    import { create_forgot_password_request } from "$lib/api/user";
    import Alert from "$lib/components/alert.svelte";
    import LL from "$lib/i18n/i18n-svelte";
    import type { ErrorResult } from "$lib/models/ErrorResult";
    import { get } from "svelte/store";

    const formData = {
        email: "",
    };

    $: showErrorAlert =
        (errorData?.text.length ?? 0 + errorData?.title.length ?? 0) > 0 &&
        !showSuccessAlert;

    const errorData = {
        text: "",
        title: "",
    } as ErrorResult;

    let showSuccessAlert = false;

    async function submit() {
        errorData.text = "";
        errorData.title = "";
        showSuccessAlert = false;
        const request = await create_forgot_password_request(formData.email);
        if (!request.ok) {
            errorData.text = request.data.text ?? $LL.common.tryAgainSoon();
            errorData.title = request.data.title ?? $LL.common.unexpectedError();
            return;
        }
        showSuccessAlert = true;
    }
</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.reset.resetPassword()}
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600">
            {$LL.common.or()}
            <a
                href="/sign-in"
                class="font-medium text-indigo-600 hover:text-indigo-500"
                >{$LL.reset.gotoLoginPage().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">
            <form
                class="space-y-6"
                on:submit|preventDefault={submit}
                method="POST"
            >
                <Alert
                    title={errorData.title}
                    message={errorData.text}
                    type="error"
                    visible={showErrorAlert}
                />

                <Alert
                    type="success"
                    title={$LL.common.success()}
                    message={$LL.reset.requestSentMessage()}
                    visible={showSuccessAlert}
                />
                <div>
                    <label
                        for="email"
                        class="block text-sm font-medium text-gray-700"
                    >
                        {$LL.common.emailAddress()}</label
                    >
                    <div class="mt-1">
                        <input
                            id="email"
                            name="email"
                            type="email"
                            autocomplete="email"
                            required
                            bind:value={formData.email}
                            class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                        />
                    </div>
                </div>
                <div>
                    <button
                        type="submit"
                        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >
                        {$LL.common.send($LL.common.request().toLowerCase())}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
