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

    export let formRow: FormRow
    export let index: number

    export let formValues: Writable<FormValues>
    /* function getSortedFields(column: FormColumn) {
        const fields = [
            ...(column.text.length ? [{ text: column.text, type: "text", order: column.textfieldOrder ?? 3 }] : []),
            ...(column.showTimes ? [{ type: "times", order: column.timesfieldOrder ?? 3, times: column.times }] : []),
            ...(column.showDate
                ? [{ type: "date", order: column.datefieldOrder ?? 3, datePlaceholder: column.datePlaceholder }]
                : []),
        ]
        return fields.sort((a, b) => a.order - b.order)
    }*/
    //formRow.columns = formRow.columns.map((e) => getSortedFields(e))
    function removeInvalid(e: Event) {
        let element = e.currentTarget as HTMLElement
        if (element) element.classList.remove("invalid")
    }
</script>

<div class="form-row">
    <div class="form-cols">
        {#each formRow.columns as column, columnIndex}
            <div class="form-column">
                <h3>{column?.title ?? ""}</h3>
                {#if column?.annotation}
                    <p>{column?.annotation}</p>
                {/if}
                {#if column.showLabelNumber}
                    <FormLabelNumberBlock column="{column}" formValues="{formValues}" rowIndex="{index}" />
                {/if}

                {#if column?.showTimes}
                    <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>
                {/if}

                {#if column?.showSelect}
                    <label bind:this="{$formValues[`select_${column?.title ? column.title + '_' : ''}label`]}">
                        <select
                            required="{column?.dateSelectNotRequired !== 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>
                {/if}

                {#if column.showDate}
                    <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>
                {/if}
                {#if column.showNumber}
                    <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>
                {/if}

                {#each column.text || [] as textField, 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}
                {/each}
            </div>
        {/each}
    </div>
</div>

<style lang="less">
</style>
