<script lang="ts">
    import FormLabelNumberBlock from "./formLabelNumberBlock.svelte"
    import type { Writable } from "svelte/store"

    export let formRow: FormRow
    export let formValues: Writable<FormValues>
    export let index: number
    function removeInvalid(e: Event) {
        let element = e.currentTarget as HTMLElement
        if (element) element.classList.remove("invalid")
    }

    function getPosition(column: FormColumn, pos: number, i = 0) {
        let position = 0
        if (pos == 0) return
        if (column.showLabelNumber) position++
        if (pos == 1) return position
        if (column.showTimes) position++
        if (pos == 2) return position

        if (column.showSelect) position++
        if (pos == 3) return position
        if (column.showDate) position++
        if (pos == 4) return position
        if (column.showNumber) position++
        return position + i
    }
</script>

<div class="form-row">
    <div class="form-cols mobile-fields">
        {#each formRow.columns as column, columnIndex}
            <h3>{column?.title ?? ""}</h3>
            {#if column?.annotation}
                <p>{column?.annotation}</p>
            {/if}
            {#if column.showLabelNumber}
                <div class="{`column-${columnIndex} position-${getPosition(column, 0)}`}">
                    <FormLabelNumberBlock column="{column}" formValues="{formValues}" rowIndex="{index}" />
                </div>
            {/if}

            {#if column?.showTimes}
                <div class="column-{columnIndex} position-{getPosition(column, 1)}">
                    <label bind:this="{$formValues[`times_${column?.title ? column.title + '_' : ''}label`]}">
                        <select
                            id="time-select"
                            bind:this="{$formValues[
                                `times_${column?.title ?? 'Zeiten'}_${column.timesfieldOrder}_${index}_${
                                    column.emailNameTimes || columnIndex + 'invalidtimes'
                                }`
                            ]}"
                            required="{column?.timeNotRequired !== true}"
                            on:change="{removeInvalid}"
                        >
                            <option value="" disabled selected>Bitte Uhrzeit wählen</option>
                            {#each column?.times ?? [] as time}
                                <option value="{time?.timeFrom}-{time?.timeTo}">
                                    {time?.timeFrom} - {time?.timeTo}
                                </option>
                            {/each}
                        </select>
                    </label>
                </div>
            {/if}

            {#if column?.showSelect}
                <div class="column-{columnIndex} position-{getPosition(column, 2)}">
                    <label bind:this="{$formValues[`select_${column?.title ? column.title + '_' : ''}label`]}">
                        <select
                            required="{column?.dateNotRequired !== true}"
                            bind:this="{$formValues[
                                `select_${column?.title ?? 'Auswahl'}_${column.datefieldOrder}_${index}_${
                                    column?.emailNameTime || columnIndex + 'invalidtime'
                                }`
                            ]}"
                            on:change="{removeInvalid}"
                        >
                            <option value="" disabled selected>{column.selectTitle}</option>
                            {#each column?.selectEntries as entry}
                                <option value="{entry?.leftSide}-{entry?.rightSide}">
                                    {entry?.leftSide}-{entry?.rightSide}
                                </option>
                            {/each}
                        </select>
                    </label>
                </div>
            {/if}

            {#if column.showDate}
                <div class="column-{columnIndex} position-{getPosition(column, 3)}">
                    <label bind:this="{$formValues[`date_${column?.title ? column.title + '_' : ''}label`]}">
                        <input
                            class="date"
                            type="date"
                            required="{column?.dateNotRequired !== true}"
                            on:change="{removeInvalid}"
                            bind:this="{$formValues[
                                `date_${column?.title ?? 'Datum'}_${column.datefieldOrder}_${index}_${
                                    column?.emailNameDate || columnIndex + 'invaliddate'
                                }`
                            ]}"
                        />
                    </label>
                </div>
            {/if}
            {#if column.showNumber}
                <div class=" column-{columnIndex} position-{getPosition(column, 4)}">
                    <label
                        bind:this="{$formValues[
                            `input_${column.title ? column.title + '_' : ''}${column?.numberPlaceholder}_label`
                        ]}"
                    >
                        <input
                            type="number"
                            step="any"
                            required="{column?.numberNotRequired !== true}"
                            on:change="{removeInvalid}"
                            placeholder="{column?.numberPlaceholder}"
                            bind:this="{$formValues[
                                `input_${column.title ? column.title + '_' : ''}${column?.numberPlaceholder}_${
                                    column.numberfieldOrder
                                }_${index}_${column?.emailNameNumber || columnIndex + 'invalidnumber'}`
                            ]}"
                        />
                    </label>
                </div>
            {/if}

            {#each column.text ?? [] as textField, textFieldIndex}
                <div class="column-{columnIndex} position-{getPosition(column, 5 + textFieldIndex, textFieldIndex)}">
                    {#if textField?.textArea}
                        <label bind:this="{$formValues[`textarea_Nachricht_label`]}">
                            <textarea
                                placeholder="{textField?.textPlaceholder}"
                                required="{textField?.notRequired !== true}"
                                on:change="{removeInvalid}"
                                bind:this="{$formValues[
                                    `textarea_Nachricht_${textField.textfieldOrder}_${index}_${
                                        textField.emailName || columnIndex + 'invalidtext' + textFieldIndex
                                    }`
                                ]}"></textarea>
                        </label>
                    {:else}
                        <label
                            bind:this="{$formValues[
                                `input_${column.title ? column.title + '_' : ''}${textField?.textPlaceholder}_label`
                            ]}"
                        >
                            <input
                                type="text"
                                placeholder="{textField?.textPlaceholder}"
                                on:change="{removeInvalid}"
                                required="{textField?.notRequired !== true}"
                                bind:this="{$formValues[
                                    `${
                                        textField?.telValidation
                                            ? 'Telefon'
                                            : textField?.emailValidation
                                            ? 'Email'
                                            : 'input'
                                    }_${column.title ? column.title + '_' : ''}${textField?.textPlaceholder}_${
                                        textField.textfieldOrder
                                    }_${index}_${textField.emailName || columnIndex + 'invalidtext' + textFieldIndex}`
                                ]}"
                            />
                        </label>
                    {/if}
                </div>
            {/each}
        {/each}
    </div>
</div>

<style lang="less">
    .mobile-fields {
        display: flex;
        flex-direction: column;
    }

    .form-field {
        order: 1;
    }

    /* Order for first column */
    .column-0.position-0 {
        order: 1;
    }
    .column-0.position-1 {
        order: 5;
    }
    .column-0.position-2 {
        order: 9;
    }
    .column-0.position-3 {
        order: 13;
    }
    .column-0.position-4 {
        order: 17;
    }
    .column-0.position-5 {
        order: 21;
    }
    .column-0.position-6 {
        order: 25;
    }
    .column-0.position-7 {
        order: 29;
    }
    .column-0.position-8 {
        order: 33;
    }
    .column-0.position-9 {
        order: 37;
    }

    /* Order for second column */
    .column-1.position-0 {
        order: 2;
    }
    .column-1.position-1 {
        order: 6;
    }
    .column-1.position-2 {
        order: 10;
    }
    .column-1.position-3 {
        order: 14;
    }
    .column-1.position-4 {
        order: 18;
    }
    .column-1.position-5 {
        order: 22;
    }
    .column-1.position-6 {
        order: 26;
    }
    .column-1.position-7 {
        order: 30;
    }
    .column-1.position-8 {
        order: 34;
    }
    .column-1.position-9 {
        order: 38;
    }

    /* Order for third column */
    .column-2.position-0 {
        order: 3;
    }
    .column-2.position-1 {
        order: 7;
    }
    .column-2.position-2 {
        order: 11;
    }
    .column-2.position-3 {
        order: 15;
    }
    .column-2.position-4 {
        order: 19;
    }
    .column-2.position-5 {
        order: 23;
    }
    .column-2.position-6 {
        order: 27;
    }
    .column-2.position-7 {
        order: 31;
    }
    .column-2.position-8 {
        order: 35;
    }
    .column-2.position-9 {
        order: 39;
    }

    /* Order for fourth column */
    .column-3.position-0 {
        order: 4;
    }
    .column-3.position-1 {
        order: 8;
    }
    .column-3.position-2 {
        order: 12;
    }
    .column-3.position-3 {
        order: 16;
    }
    .column-3.position-4 {
        order: 20;
    }
    .column-3.position-5 {
        order: 24;
    }
    .column-3.position-6 {
        order: 28;
    }
    .column-3.position-7 {
        order: 32;
    }
    .column-3.position-8 {
        order: 36;
    }
    .column-3.position-9 {
        order: 40;
    }
</style>
