<script lang="ts">
    import { fade } from "svelte/transition"
    import { mdiCheck, mdiChevronDown } from "@mdi/js"
    import Icon from "mdi-svelte"

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

    export let type: string
    export let collapsed: boolean = false

    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>

<div id="{type}">
    <form on:submit|preventDefault="{submit}" class="mt-lg">
        <div class="layout justify-content-space-between layout-gap-md">
            <div class="hidden-sm icon {type}">
                <!-- <img src="img/icon/{type}.svg" alt="" /> -->
            </div>
            <div class="titles" on:click="{() => (collapsed = !collapsed)}">
                <h3 class="title">
                    {type === "contact" ? "Kontakt" : ""}
                    {type === "recipe" ? "Rezeptanfrage" : ""}
                </h3>
                <h4 class="subTitle">
                    {type === "contact" ? "Schreiben Sie uns Ihr Anliegen" : ""}
                    {type === "recipe" ? "Teilen Sie uns Ihren Rezeptwunsch mit" : ""}
                </h4>
            </div>
            <div class="collapse-icon" class:collapsed="{!collapsed}" on:click="{() => (collapsed = !collapsed)}">
                <Icon path="{mdiChevronDown}" size="2" />
            </div>
        </div>
        {#if !collapsed}
            <div>
                <div class="row">
                    <div class="col-md-6 mt-sm">
                        <input
                            type="text"
                            bind:value="{formData['name']}"
                            placeholder="Name"
                            readonly="{requestPending}"
                        />
                    </div>
                    <div class="col-md-6 mt-sm">
                        <input
                            type="text"
                            bind:value="{formData['email']}"
                            placeholder="E-Mail Adresse"
                            readonly="{requestPending}"
                        />
                    </div>
                </div>
                <div class="row nospace">
                    <div class="col-md-12 mt-sm">
                        <input
                            type="text"
                            bind:value="{formData['subject']}"
                            placeholder="Betreff"
                            readonly="{requestPending}"
                        />
                    </div>
                </div>
                <div class="row nospace">
                    <div class="col-md-12 mt-sm">
                        <textarea bind:value="{formData['message']}" readonly="{requestPending}"></textarea>
                    </div>
                </div>
                <div class="row nospace">
                    <div class="col-md-12 mt-sm">
                        <div class="layout layout-gap-md align-items-center">
                            <div
                                class="checkbox"
                                on:click="{() => {
                                    formData.privacy = !formData.privacy
                                }}"
                            >
                                {#if formData.privacy}
                                    <div class="icon">
                                        <Icon path="{mdiCheck}" size="2" />
                                    </div>
                                {/if}
                            </div>
                            <div on:click="{() => (formData.privacy = !formData.privacy)}">
                                <a href="/datenschutz"><strong>Datenschutz</strong></a> akzeptieren
                            </div>
                        </div>
                    </div>
                </div>
                {#if requestSucessfully}
                    <div class="mt-sm" transition:fade>
                        <div>
                            <strong>Vielen Dank für Ihre Kontaktaufnahme!</strong>
                        </div>
                        <p>Wir werden uns zeitnah mit Ihnen in Verbindung setzen!</p>
                    </div>
                {/if}
                <div class="layout justify-content-end mt-sm">
                    <button type="submit" disabled="{!isValid || requestPending}">Absenden</button>
                </div>
            </div>
        {/if}
    </form>
</div>
