<script setup lang="ts">
import { getColorHexFromRal } from '@/components/ral'
import type { ralTypes } from '@/components/ral'
import { CanvasTexture } from 'three';

const props = defineProps(['index', 'models'])

const lamelles_count = useState<number>('lamelles_count')
const fence_section = useState<number>('fence_section')
const section_count = useState<number>('section_count')
const extra_section = useState<number>('extra_section')
const pillar_color = useState<ralTypes>('pillar_color')
const lamelle_color = useState<ralTypes>('lamelle_color')
const remove_pillar = useState<boolean>('remove_pillar')

const lSize = 0.115
const bSize = 0.0235
const pillar_size = 80 * 0.001

const pillar_one_pos = ref(fence_section.value * -0.5 - 0.015)
const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize - 0.01)

const scale_koef = 2.5
const show_pillar_one = ref(props.index == 1)
const show_pillar_two = ref(true)

const make_translate_to_section = (source = fence_section.value) => {
    const one_s = (source + pillar_size + bSize)
    let r = (props.index - 1) * one_s * scale_koef
    return r
}
const translate_to_section = ref(make_translate_to_section())

watch(fence_section, () => {
    translate_to_section.value = make_translate_to_section()
})

const s = 512
const canvas = document.createElement('canvas')
canvas.width = s
canvas.height = s
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
ctx.fillStyle = "red"
ctx.font = "512px serif"
ctx.textAlign = "center"
ctx.textBaseline = 'middle'
ctx.fillText(props.index, s * 0.5, s * 0.5)

const textures: any[] = []
for (let index = 0; index < lamelles_count.value; index++) {
    const element = document.createElement('canvas')
    element.width = s
    element.height = s / lamelles_count.value
    const e_ctx = element.getContext('2d') as CanvasRenderingContext2D
    e_ctx.drawImage(canvas,
        0, (s / lamelles_count.value) * index, s, s / lamelles_count.value,
        0, 0, s, s / lamelles_count.value
    );
    textures.push(new CanvasTexture(element))
}
const extra = ref((extra_section && props.index == (section_count.value + 1)) ? extra_section.value * 0.001 : false)
if (extra.value) {
    pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
    pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
}
watch([section_count, fence_section, extra_section], (s) => {
    extra.value = (extra_section.value && props.index == (section_count.value + 1)) ? extra_section.value * 0.001 : false
    if (extra_section && props.index == (section_count.value + 1)) {
        pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
        pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
        // translate_to_section.value = make_translate_to_section(extra_section.value * 0.001)
    } else {
        pillar_one_pos.value = fence_section.value * -0.5 - 0.015
        pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
        // translate_to_section.value = make_translate_to_section()
    }
})
</script>
<template>
    <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`"
        :position-y="extra ? 1 : 0">
        <TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos"
            :position-z="0">
            <TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
            </TresGroup>
            <template v-for="(n, i) in lamelles_count">
                <TresGroup :position-y="(lSize * i)">
                    <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
                </TresGroup>
            </template>
            <TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
            </TresGroup>
        </TresGroup>

        <TresGroup name="pillar_two" v-if="!remove_pillar && show_pillar_two" :position-x="pillar_two_pos"
            :position-z="0">
            <TresGroup :position-y="(lSize * -0.5)" :scale="[-1, 0.5, 1]">
                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
            </TresGroup>
            <template v-for="(n, i) in lamelles_count">
                <TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]">
                    <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
                </TresGroup>
            </template>
            <TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
            </TresGroup>
        </TresGroup>

        <TresGroup name="lamelles">
            <template v-for="(n, i) in lamelles_count">
                <TresGroup :position="[pillar_size * 0.5, (lSize * i), 0.02]" :scale-x="(extra || fence_section) * 10">
                    <ModelItem :model="props.models.lamelle" :color="getColorHexFromRal(lamelle_color)"
                        :map="textures[textures.length - 1 - i]" />
                </TresGroup>
            </template>
        </TresGroup>
        <TresGroup name="lamelles_fastening_one">
            <template v-for="(n, i) in lamelles_count">
                <TresGroup :position-y="(lSize * i)" :position-x="pillar_one_pos">
                    <ModelItem :model="props.models.fastening" :color="getColorHexFromRal(pillar_color)" />
                </TresGroup>
            </template>
        </TresGroup>
        <TresGroup name="lamelles_fastening_two">
            <template v-for="(n, i) in lamelles_count">
                <TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]" :position-x="pillar_two_pos">
                    <ModelItem :model="props.models.fastening" :remove-pos="true"
                        :color="getColorHexFromRal(pillar_color)" />
                </TresGroup>
            </template>
        </TresGroup>
        <TresGroup name="top_section" :scale-x="(extra || fence_section) * 10"
            :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
            <ModelItem :model="props.models.top" :color="getColorHexFromRal(pillar_color)" />
        </TresGroup>
    </TresGroup>
</template>