<script lang="ts">
    import type { Writable } from "svelte/store"
    export let column: FormColumn
    export let formValues: Writable<FormValues>

    export let rowIndex: number
    let blockContainer: HTMLDivElement
    $formValues["blockGroups"] = new Set(column.labelNumber.map((e) => e.group))
</script>

<div class="blockContainer" bind:this="{blockContainer}">
    {#each column.labelNumber as outerblock, i}
        <div class="{`block`}" bind:this="{$formValues['blockGroups'][i]}">
            <h3>{outerblock.title}</h3>
            <div class="innterBlockContainer">
                {#each outerblock.block as innerBlock}
                    <div class="innerBlock">
                        <div class="label">{innerBlock.label}</div>
                        <input
                            placeholder="0"
                            on:change="{(e) => {
                                let element = e.currentTarget
                                element.classList.remove('border-red')
                                blockContainer.classList.remove('invalidBlocks')
                            }}"
                            type="number"
                            name="{outerblock.group}"
                            class="{`group-${outerblock.group}`}"
                            bind:this="{$formValues[
                                `numberLabel_${outerblock.title ?? ''}_${innerBlock.label}_${rowIndex}_${
                                    innerBlock.emailName
                                }`
                            ]}"
                        />
                    </div>
                {/each}
            </div>
        </div>
    {/each}
</div>

<style lang="less">
    .block {
        width: 100%;
        padding: 25px 0px;
        h3 {
            margin-bottom: 0px;
        }
        .innerBlock {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .label {
                display: flex;
                align-items: flex-end;
            }
            input {
                text-align: center;
                width: 80px;
                font-size: 1rem;
            }
        }
    }
</style>
