<script lang="ts">
    import { _ } from "svelte-i18n"
    import { fade } from "svelte/transition"
    import { mdiCheck } from "@mdi/js"
    import Icon from "mdi-svelte"
    import { link } from "svelte-routing"

    import { sendEmail } from "../../../api"
    import { currentLang } from "../../../store"

    export let type: string = "contact"

    let formData: {
        name: string
        email: string
        subject: string
        message: string
        privacy: boolean
    } = {
        name: null,
        email: null,
        subject: null,
        message: null,
        privacy: false,
    }
    let requestSucessfully: boolean = false
    let requestPending: boolean = false

    const submit = () => {
        if (
            formData["name"] &&
            formData["email"] &&
            formData["subject"] &&
            formData["message"] &&
            formData["privacy"]
        ) {
            requestPending = true
            sendEmail(type + "Form", formData)
                .then(() => {
                    resetForm()
                    requestSucessfully = true
                    requestPending = false

                    setTimeout(() => {
                        requestSucessfully = false
                    }, 10000)
                })
                .catch((e) => {
                    console.error(e)
                    requestPending = false
                })
                .finally(() => {
                    requestPending = false
                })
        }
    }

    const resetForm = () => {
        formData = {
            name: null,
            email: null,
            subject: null,
            message: null,
            privacy: false,
        }
    }

    $: isValid =
        formData["name"] && formData["email"] && formData["subject"] && formData["message"] && formData["privacy"]
</script>

<form on:submit|preventDefault="{submit}">
    <div class="row">
        <div class="col-md-6 mt-sm">
            <input
                type="text"
                bind:value="{formData['name']}"
                placeholder="{$_('form.contact.name')}"
                readonly="{requestPending}"
            />
        </div>
        <div class="col-md-6 mt-sm">
            <input
                type="email"
                bind:value="{formData['email']}"
                placeholder="{$_('form.contact.email')}"
                readonly="{requestPending}"
            />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 mt-sm">
            <input
                type="text"
                bind:value="{formData['subject']}"
                placeholder="{$_('form.contact.subject')}"
                readonly="{requestPending}"
            />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 mt-sm">
            <textarea
                bind:value="{formData['message']}"
                readonly="{requestPending}"
                placeholder="{$_('form.contact.message')}"></textarea>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 mt-sm">
            <label for="privacy-checkbox" class="checkbox-container">
                <div
                    class="checkbox"
                    id="privacy-checkbox"
                    on:click="{() => (formData.privacy = !formData.privacy)}"
                    on:keydown
                >
                    {#if formData.privacy}
                        <div class="icon">
                            <Icon path="{mdiCheck}" size="2" />
                        </div>
                    {/if}
                </div>
                <div on:click|stopPropagation="{() => (formData.privacy = !formData.privacy)}" on:keydown>
                    <a use:link href="{`/${$currentLang}/${$_('privacy').toLowerCase()}`}" on:click|stopPropagation
                        ><strong>{$_("privacy")}</strong></a
                    >
                    {$_("accept")}
                </div>
            </label>
        </div>
        <div class="col-md-6 mt-sm">
            <button type="submit" disabled="{!isValid || requestPending}">{$_("form.contact.send")}</button>
        </div>
    </div>

    {#if requestSucessfully}
        <div class="mt-sm" transition:fade>
            <div>
                <strong>{$_("form.contact.thankYou")}</strong>
            </div>
            <p>{$_("form.contact.getInTouch")}</p>
        </div>
    {/if}
</form>
