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

    export let formRow: DBFormRow
    export let index: number
    export let formValues: Writable<FormValues>
    let innerWidth = typeof window !== "undefined" ? window?.innerWidth || 0 : 0
    if (typeof window !== "undefined") {
        onMount(() => {
            const handleResize = () => {
                innerWidth = window.innerWidth
            }

            window.addEventListener("resize", handleResize)

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

<div class="form-row">
    <h3 style="margin-bottom: -0.5rem;">
        {#if formRow.title}{formRow.title || ""}{/if}
    </h3>
    {#if innerWidth < 768}
        <div class="form-cols mobile-fields">
            {#each formRow.columns as column, columnIndex}
                <FormColumn {column} {index} {columnIndex} {formValues} />
            {/each}
        </div>
    {/if}
    {#if innerWidth >= 768}
        <div class="form-cols desktop-fields">
            {#each formRow.columns as column, columnIndex}
                <div class="form-column">
                    <FormColumn {column} {index} {columnIndex} {formValues} />
                </div>
            {/each}
        </div>{/if}
</div>

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

    .desktop-fields {
        display: flex !important;
    }
</style>
