<script setup lang="ts">
const lamelles_count = useState('lamelles_count', () => 8)
const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
const pillar_color = useState('pillar_color', () => '#828282')
const lamelle_color = useState('lamelle_color', () => '#C2B078')

const parametric = {
    length: {
        min: 100,
        max: 2400,
        step: 10,
    },
    height: {
        min: 220,
        max: 2400,
        step: 115,
    }
}
const form_state = reactive({
    length: fence_section.value * 1000,
    height: lamelles_count.value * parametric.height.step
})

const changeParametres = () => {
    const lamelles = Math.floor(form_state.height / parametric.height.step)
    lamelles_count.value = lamelles
    fence_section.value = form_state.length * 0.001
    for (const key in form_state) {
        if (parametric.hasOwnProperty(key) && parametric[key].max) {
            if (form_state[key] > parametric[key].max) {
                form_state[key] = parametric[key].max
            }
        }
        if (parametric.hasOwnProperty(key) && parametric[key].min) {
            if (form_state[key] < parametric[key].min) {
                form_state[key] = parametric[key].min
            }
        }
    }
}

const setLamelleColor = (color: string) => {
    lamelle_color.value = color
}
const setPillarColor = (color: string) => {
    pillar_color.value = color
}
const increment = (field: keyof typeof form_state, value: number) => {
    if (form_state.hasOwnProperty(field)) {
        let v = form_state[field] + value * parametric[field].step ?? 1
        if (parametric.hasOwnProperty(field)) {
            if (v > parametric[field].max) {
                v = parametric[field].max
            }
            if (v < parametric[field].min) {
                v = parametric[field].min
            }
        }
        form_state[field] = v
    }
}

const predefLamelleColors = ['#474B4E', '#705335', '#FDF4E3', '#2F4538']
const predefPillarColors = ['#474B4E', '#6A5D4D', '#F4F4F4', '#2F4538']

watch(form_state, changeParametres, { deep: true })
</script>
<template>
    <div class="container py-4">
        <form class="form">
            <div class="form-row">
                <div class="form-item">
                    <label for="length">Длина секции, мм</label>
                    <Icon type="button" @click="increment('length', -1)" name="mdi:minus-circle-outline" />
                    <input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
                    <Icon type="button" @click="increment('length', 1)" name="mdi:plus-circle-outline" />
                </div>
                <div class="form-item">
                    <label for="height">Высота забора, мм</label>
                    <Icon type="button" @click="increment('height', -1)" name="mdi:minus-circle-outline" />
                    <input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
                    <Icon type="button" @click="increment('height', 1)" name="mdi:plus-circle-outline" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <label for="lamelle_color">Цвет ламелей</label>
                    <input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
                    <template v-for="item in predefLamelleColors">
                        <ColorPicker :color="item" :cb="setLamelleColor" :open="false"
                            :active="lamelle_color == item" />
                    </template>
                    <ColorPicker :cb="setLamelleColor" />
                </div>
                <div class="form-item">
                    <label for="pillar_color">Цвет столба</label>
                    <input id="pillar_color" type="text" v-model="pillar_color" disabled />
                    <template v-for="item in predefPillarColors">
                        <ColorPicker :color="item" :cb="setPillarColor" :open="false" :active="pillar_color == item" />
                    </template>
                    <ColorPicker :cb="setPillarColor" />
                </div>
            </div>
        </form>
    </div>
</template>