<script lang="ts">
    import Form from "./form.svelte"
    import MobileForm from "./mobileForm.svelte"
    import { writable } from "svelte/store"
    import { validateFields } from "../../../functions/validateFields"
    import { sendForm } from "../../../functions/sendForm"
    import { navigate } from "svelte-routing"
    import { onMount } from "svelte"

    export let col: Column
    export let siteId: string
    export let rowNr: number
    export let row: Row
    export let rows: Row[]

    let formSend = false
    let formValues = writable<FormValues>({})

    function submitForm() {
        const values: Array<ValueEntry> = Object.entries($formValues).map((entry: ObjectEntry) => {
            const key: string = entry[0]
            const value: CustomHTMLElement = entry[1]
            if (!key.includes("numberLabel")) {
                return [key, [value.checked || value.value, value.required]] as ValueEntry
            } else {
                return [key, [value.value, value, value.getAttribute("name"), value.required]] as ValueEntry
            }
        })

        const fields: Array<ValueEntry> = values.filter((entry: ValueEntry) => !entry[0].includes("label"))
        const validation = validateFields(fields)
        if (validation.length) {
            validation.forEach((error) => {
                // @ts-ignore
                if (error[0].includes("block")) {
                    // @ts-ignore
                    error[1]()
                } else {
                    // @ts-ignore
                    $formValues[error[1]].classList.add("invalid")
                    const label = $formValues[`${error[1]}_label`]
                    const errorElement = document.createElement("div")
                    errorElement.className = "error-message"
                    errorElement.textContent = error[0] as string
                    label?.appendChild(errorElement)
                }
            })
        } else {
            // @ts-ignore
            const formObj: FormObj = {}
            fields.forEach((entry) => {
                if (Array.isArray(entry[1]) && entry[1].length == 4) {
                    // @ts-ignore
                    if (entry[1][0]) formObj[entry[0]] = entry[1]
                } else {
                    if (!entry[1][0] && !entry[1][1]) return
                    // @ts-ignore
                    formObj[entry[0]] = entry[1][0]
                }
            })
            let form: any
            row.column.forEach((col) => {
                if (col.contentType == "form") form = col
            })
            if (!form) return
            formObj["formRows"] = form.formRows.map((r: FormRow) => r.rowName)
            formObj["formTitle"] = form.formEmailTitle
            formSend = true
            const hny = document.getElementById("hny") as HTMLInputElement
            if (hny) formObj["honey"] = hny.checked
            sendForm(formObj)
        }
    }
    let innerWidth = window.innerWidth

    onMount(() => {
        const handleResize = () => {
            innerWidth = window.innerWidth
        }

        window.addEventListener("resize", handleResize)

        // Cleanup function
        return () => {
            window.removeEventListener("resize", handleResize)
        }
    })
</script>

{#if formSend}
    <div class="success-message">
        <h1>Formular erfolgreich gesendet!</h1>
        <p>Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.</p>
    </div>
{:else}
    <form
        class="form-rows"
        on:submit="{(e) => {
            e.preventDefault()
            submitForm()
        }}"
    >
        {#each col.formRows ?? [] as formRow, i}
            {#if innerWidth < 768}
                <MobileForm formRow="{formRow}" formValues="{formValues}" index="{i}" />
            {:else}
                <Form formRow="{formRow}" formValues="{formValues}" index="{i}" />
            {/if}
        {/each}
        <div class="row additional" style="padding: 0px;">
            <div class="data-protection">
                <label bind:this="{$formValues[`agreement_label`]}">
                    <input
                        required="{true}"
                        class="checkit"
                        type="checkbox"
                        on:change="{(e) => {
                            let element = e.currentTarget
                            element.classList.remove('invalid')
                        }}"
                        bind:this="{$formValues['agreement']}"
                    />
                    <span class="checkit-span"></span>
                </label>

                <div class="datasec">
                    <button on:click|preventDefault="{() => navigate('/datenschutz')}" class="link">
                        Datenschutz
                    </button>
                    akzeptieren
                </div>
            </div>

            <input
                type="checkbox"
                name="contact_me_by_fax_only"
                id="hny"
                value="1"
                style="display:none !important"
                tabindex="-1"
                autocomplete="off"
            />
            <button class="submit-request" type="submit">Anfrage absenden</button>
        </div>
    </form>
{/if}

<style lang="less" global>
    @import "../../../assets/css/variables.less";

    input,
    select,
    textarea,
    .data-protection {
        margin: 5px 0px;
        box-shadow: 0 0 25px 10px var(--opposite-bg-color-5);
    }

    .success-message {
        h1 {
            color: var(--heading-font-color);
            font-size: 36px;
            margin-top: 50px;
        }

        p {
            font-size: 20px;
            margin-top: 20px;
        }
    }
    .invalidBlocks {
        border: 2px solid rgb(255, 0, 0) !important;
        position: relative;
        &::after {
            font-size: 0.9rem !important;
            color: red !important;
            position: absolute;
            bottom: 2px;
            content: "Bitte wähle entweder eine Kartenanzahl oder einen Wunschbetrag aus.";
        }
    }

    .border-red {
        border-color: red !important;
    }

    .no-margin {
        margin-top: 15px !important;
    }

    .invalid {
        border: 2px solid red !important;
    }
    .error-message {
        font-size: 0.9rem !important;
        color: red !important;
        position: absolute;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
        height: 100%;
    }

    input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .checkit {
        display: none;
    }

    .checkit-span {
        height: 20px;
        width: 20px;
        border: 1px solid grey;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    [type="checkbox"]:checked + span:before {
        content: "\2714";
        position: absolute;
        transform-origin: bottom;
    }

    .form-rows {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        h3 {
            font-weight: bold !important;
            margin-bottom: 0px !important;
        }

        .form-row {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 1.5rem;

            .date {
                max-width: 100%;
                box-sizing: border-box;
            }
            label {
                width: 100% !important;
                font-size: inherit;
                input,
                select,
                textarea {
                    width: 100%;
                    font-size: inherit;
                }
            }
            .form-cols {
                display: flex;
                gap: 1.5rem;
                width: 100%;
            }
        }

        .form-column {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: flex-start;

            width: 100%;
            gap: 1rem;
            border-radius: 4px;
        }

        h3 {
            font-size: 1.2rem;
            font-weight: bold;
        }

        p {
            margin-bottom: 0.5rem;
            color: var(--hover-color);
        }

        input,
        select,
        textarea,
        .data-protection {
            padding: 10px 20px;
            border: 0px solid var(--opposite-bg-color);
            border-bottom: 3px solid var(--heading-font-color);
            outline: 0px solid var(--opposite-bg-color);
            color: var(--opposite-bg-color);
            background-color: var(--background-color);
            resize: none;
        }

        .data-protection {
            display: flex;

            flex-wrap: nowrap;
            gap: 5px !important;
            justify-content: start;
            flex-direction: row !important;
        }

        input[type="date"] {
            font-family: inherit;
            width: 100% !important;
            position: relative;
        }

        select {
            padding: 10px 20px;
            border: 0;
            border-bottom: 3px solid var(--heading-font-color);
            outline: none;
        }

        select:focus {
            border-bottom-color: var(--heading-font-color);
        }

        #time-select {
            appearance: none;
            background-image: url("../../../../../media/clock.svg");
            background-repeat: no-repeat;
            background-position: right 20px center;
            background-size: 18px;

            option {
                padding: 10px 20px;
                background-color: var(--background-color);
            }
        }
        @media @mobile {
            .date {
                width: 100vw !important;
            }
        }
        @media @tablet {
            .date {
                width: 100% !important;
            }
            .form-cols {
                flex-direction: row;
            }
        }
    }
    i .max-width {
        max-width: @body-maxwidth !important;
    }

    .datasec {
        display: flex;
        align-items: center !important;
        .link {
            height: 100%;
            display: flex;
            align-items: flex-end !important;
            text-decoration: underline;
            margin-right: 3px;
            color: rgb(14, 91, 146);
        }
    }

    .additional {
        display: flex;
        @media @mobile {
            flex-direction: column !important;
        }
        @media @tablet {
            flex-direction: row !important;
        }
        gap: 2.5rem;
        div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: start;
        }
        .submit-request {
            flex: 1;
            box-shadow: 0 0 25px 10px var(--opposite-bg-color-5);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: start;
            background-color: var(--heading-font-color);
            color: var(--background-color);
            padding: 10px 20px;
        }
    }
</style>
