<script lang="ts">
    import {t} from "$lib/i18n";
    import {API_ROOT} from "$lib/config";

    let email = "";
    let isloading = false;
    let isFinished = false;
    let hasError = false;
    let error = "";

    function createAcc() {
        if (isloading) {
            return;
        }
        isloading = true;

        let xhr = new XMLHttpRequest();
        xhr.timeout = 10000;
        xhr.open('POST', `${API_ROOT}/v1/signup`);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify({
            email: email
        }));

        xhr.ontimeout = () => {
            hasError = true;
            error = t('signup.apierror.timeout');
            isloading = false;
        };

        xhr.onload = () => {
            if (xhr.status != 200) {
                // error
                hasError = true;
                const rawerror = JSON.parse(xhr.responseText).errors[0].message;

                error = t(`signup.apierror.${rawerror}`);

                isloading = false;
            } else {
                isloading = false;
                isFinished = true;
            }
        };

        xhr.onerror = () => {
            hasError = true;
            error = t('signup.apierror.xhrerror');
            isloading = false;
        };
    }
</script>

<div class="flex in-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="w-full max-w-md">
        {#if !isFinished}
            <!-- Title -->
            <div>
                <h1 class="font-semibold text-2xl">{t('signup.title')}</h1>
                <h2 class="ftext-sm">{t('signup.subtitle')}</h2>
            </div>

            <!-- The actual form -->
            <form class="mt-5" action="#" method="POST" on:submit|preventDefault={createAcc}>
                <div class="rounded-md shadow-sm">
                    <label for="email">{t('signup.prompt')}</label>
                    <input bind:value={email} id="email"
                           class="dark:bg-slate-500 bg-gray-200 w-full rounded px-3 py-2 focus:outline-none focus:ring-purple-500 appearance-none">
                    {#if hasError}
                        <span class="text-red-600 text-sm">{error}</span>
                    {/if}
                </div>

                <button class="bg-purple-400 dark:bg-purple-600 mt-4 w-full py-2 -space-y-px rounded-md shadow-sm place-content-center">
                    {#if !isloading}
                        {t('signup.actionButtonText')}
                    {:else}
                        <svg class="animate-spin w-5 h-5 inline-block m-auto" xmlns="http://www.w3.org/2000/svg"
                             fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor"
                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    {/if}
                </button>

                <div class="text-xs mt-0.5">
                    <a class="font-bold text-purple-400 dark:text-purple-600" href="/auth/login">{t('signup.login')}</a>
                </div>

            </form>
        {:else}
            <!-- Title -->
            <div>
                <h1 class="font-semibold text-2xl">{t('signup.sentMagicLink')}</h1>
                <h2 class="ftext-sm">{t('signup.magicLinkExplainer')}</h2>
            </div>
        {/if}
    </div>
</div>