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

    export let column: FormColumn
    export let index: number
    export let columnIndex: number
    export let formValues: Writable<FormValues>
    function removeInvalid(e: Event) {
        let element = e.currentTarget as HTMLElement
        if (element) element.classList.remove("invalid")
    }
    // @ts-ignore
    const widgets: Widget[] = column.inputWidgets.map((e) => {
        if (e === "text") {
            return {
                text: column.textInput?.map((input) => {
                    return {
                        ...input.standardInputProperties,
                        ...input,
                    }
                }),
            }
        }
        if (e === "number") {
            return {
                number: {
                    ...column.numberInput.standardInputProperties,
                },
            }
        }
        if (e === "defaultCalendar") {
            return {
                date: {
                    ...column.dateInput.standardInputProperties,
                },
            }
        }
        if (e === "times") {
            return {
                times: {
                    ...column.timesInput.standardInputProperties,
                    times: column.timesInput.times,
                },
            }
        }
        if (e === "checkboxGroup") {
            return {
                checkboxGroup: {
                    groupTitle: column.checkboxGroupInput.groupTitle,
                    checkboxes: column.checkboxGroupInput.checkboxes.map((checkbox) => {
                        return {
                            ...checkbox.standardInputProperties,
                        }
                    }),
                },
            }
        }
        if (e === "customCalendar") {
            return {
                datepicker: {
                    ...column.datePickerInput.standardInputProperties,
                    props: column.datePickerInput.props,
                },
            }
        }
        if (e === "multiSelect") {
            return {
                multiselect: {
                    ...column.datePickerInput.standardInputProperties,
                    props: column.datePickerInput.props,
                },
            }
        }
        if (e == "labelNumber") {
            return { labelNumber: column.labelNumberInput }
        }
        if (e == "timeSelect") {
            return {
                timeSelect: {
                    ...column?.timeSelect?.standardInputProperties,
                    ...column.timeSelect,
                },
            }
        }
        if (e == "standardSelect") {
            return {
                standardSelect: {
                    ...column?.standardSelect?.standardInputProperties,
                    ...column.standardSelect,
                },
            }
        }
    })

    function getPosition(column: FormColumn, pos: number, i = 0) {
        let position = 0
        if (pos == 0) return
        if (column.inputWidgets.includes("labelNumber")) position++
        if (pos == 1) return position
        if (column.inputWidgets.includes("times")) position++
        if (pos == 2) return position
        if (column.inputWidgets.includes("timeSelect")) position++
        if (pos == 3) return position
        if (column.inputWidgets.includes("standardSelect")) position++
        if (pos == 4) return position
        if (column.inputWidgets.includes("defaultCalendar")) position++
        if (pos == 5) return position
        if (column.inputWidgets.includes("number")) position++
        if (pos == 6) return position
        if (column.inputWidgets.includes("checkboxGroup")) position++
        if (pos == 7) return position
        if (column.inputWidgets.includes("customCalendar")) position++
        if (pos == 8) return position
        if (column.inputWidgets.includes("multiSelect")) position++
        return position + i
    }
</script>

{#each widgets as widget}
    {#if column?.title?.trim()}
        <h3>{column?.title ?? ""}</h3>{/if}
    {#if column?.annotation}
        <p>{column?.annotation}</p>
    {/if}
    {#if widget?.labelNumber}
        <div class="{`column-${columnIndex} position-${getPosition(column, 0)}`}">
            <FormLabelNumberBlock widget="{widget.labelNumber}" {formValues} rowIndex="{index}" />
        </div>
    {/if}

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

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

    {#if widget?.standardSelect}
        <div class="column-{columnIndex} position-{getPosition(column, 3)}">
            <label
                bind:this="{$formValues[`standardSelect_${column?.emailTitle ? column.emailTitle + '_' : ''}label`]}"
            >
                <select
                    required="{widget.standardSelect.notRequired !== true}"
                    bind:this="{$formValues[
                        `select_${column?.emailTitle ?? 'Auswahl'}_${widget?.standardSelect?.fieldOrder}_${index}_${
                            widget.standardSelect.emailTitle || columnIndex + 'invalidtime'
                        }`
                    ]}"
                    on:change="{removeInvalid}"
                >
                    {#each widget.standardSelect.selectEntries as entry}
                        <option value="{entry.value}" selected="{entry.defaultValue}">
                            {entry.shownValue}
                        </option>
                    {/each}
                </select>
            </label>
        </div>
    {/if}
    {#if widget?.date}
        <div class="column-{columnIndex} position-{getPosition(column, 4)}">
            <label bind:this="{$formValues[`date_${column.emailTitle ? column.emailTitle + '_' : ''}label`]}">
                <input
                    class="date"
                    type="date"
                    required="{widget.date.notRequired !== true}"
                    on:change="{removeInvalid}"
                    bind:this="{$formValues[
                        `date_${column?.emailTitle ?? 'Datum'}_${widget.date.fieldOrder}_${index}_${
                            widget.date.emailTitle || columnIndex + 'invaliddate'
                        }`
                    ]}"
                />
            </label>
        </div>
    {/if}
    {#if widget?.number}
        <div class="column-{columnIndex} position-{getPosition(column, 5)}">
            <label
                bind:this="{$formValues[
                    `input_${column.emailTitle ? column.emailTitle + '_' : ''}${widget.number.placeholder}_label`
                ]}"
            >
                <input
                    type="number"
                    step="any"
                    required="{widget.number.notRequired !== true}"
                    on:change="{removeInvalid}"
                    placeholder="{widget.number.placeholder}"
                    bind:this="{$formValues[
                        `input_${column.title ? column.title + '_' : ''}${widget.number.placeholder}_${
                            widget.number.fieldOrder
                        }_${index}_${widget.number.emailTitle || columnIndex + 'invalidnumber'}`
                    ]}"
                />
            </label>
        </div>
    {/if}

    {#if widget?.checkboxGroup}
        <div class="column-{columnIndex} position-{getPosition(column, 6)}">
            <CheckboxGroup
                checkboxes="{widget.checkboxGroup.checkboxes}"
                groupTitle="{widget.checkboxGroup.groupTitle}"
                {formValues}
                rowNr="{index}"
            />
        </div>
    {/if}

    {#if widget?.datepicker}
        <div class="column-{columnIndex} position-{getPosition(column, 7)}">
            <Datepicker
                datePickerProps="{widget.datepicker.props}"
                groupTitle="{widget.datepicker.groupTitle}"
                {formValues}
                rowNr="{index}"
                formCol="{column}"
            />
        </div>
    {/if}

    {#if widget?.multiselect}
        <div class="column-{columnIndex} position-{getPosition(column, 8)}">
            <Select
                groupTitle="{widget.multiselect.groupTitle}"
                {formValues}
                rowNr="{index}"
                formCol="{column}"
                options="{widget.multiselect.options}"
            />
        </div>
    {/if}
    {#if widget?.text}
        {#each widget.text ?? [] as textField, textFieldIndex}
            <div class="column-{columnIndex} position-{getPosition(column, 8 + textFieldIndex, textFieldIndex)}">
                <h3 class="textTitle">{textField.textTitle || ""}</h3>
                <div class="column-{columnIndex} position-{getPosition(column, 8 + textFieldIndex, textFieldIndex)}">
                    {#if textField?.textArea}
                        <label bind:this="{$formValues[`textarea_Nachricht_label`]}">
                            <textarea
                                placeholder="{textField?.placeholder}"
                                required="{textField?.notRequired !== true}"
                                on:change="{removeInvalid}"
                                bind:this="{$formValues[
                                    `textarea_Nachricht_${textField.fieldOrder}_${index}_${
                                        textField.emailTitle || columnIndex + 'invalidtext' + textFieldIndex
                                    }`
                                ]}"
                            ></textarea>
                        </label>
                    {:else}
                        <label
                            bind:this="{$formValues[
                                `input_${column.title ? column.title + '_' : ''}${textField?.placeholder}_label`
                            ]}"
                        >
                            <input
                                type="text"
                                placeholder="{textField?.placeholder}"
                                on:change="{removeInvalid}"
                                required="{textField?.notRequired !== true}"
                                bind:this="{$formValues[
                                    `${
                                        textField?.telValidation
                                            ? 'Telefon'
                                            : textField?.emailValidation
                                              ? 'Email'
                                              : 'input'
                                    }_${column.title ? column.title + '_' : ''}${textField?.placeholder}_${
                                        textField.fieldOrder
                                    }_${index}_${textField.emailTitle || columnIndex + 'invalidtext' + textFieldIndex}`
                                ]}"
                            />
                        </label>
                    {/if}
                </div>
            </div>
        {/each}
    {/if}
{/each}

<style lang="less">
    @media (max-width: 768px) {
        .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>
