<script setup lang="ts">
import { Box3, Vector3 } from 'three';
import { degToRad } from 'three/src/math/MathUtils.js';

const props = defineProps(['number', 'count', 'models'])
const rotate = () => {
    switch (props.number) {
        case 1:
            return degToRad(0)
        case 2:
            return degToRad(90)
        case 3:
            return degToRad(180)
        case 4:
            return degToRad(270)
    }
}
const { seekByName } = useSeek()
const { scene } = useTresContext()

const section_count = use_section_count()
const extra_section = use_extra_section()

const size = ref(new Vector3())
const total = ref((section_count.value + ~~(!!extra_section.value)))

const count_pos = () => {
    console.log('line count pos')
    total.value = (section_count.value + ~~(!!extra_section.value))

    const line = seekByName(scene.value, `line_${props.number}`)
    if (line && line.children.length) {
        const fence = line.children[0];
        if (fence) {
            const box = new Box3();
            fence.children.forEach(element => {
                box.expandByObject(element);
            });
            box.getSize(size.value)
        }
        line.updateMatrixWorld()
    }
}
onMounted(() => {
    count_pos()
})
watch(() => [props.count, section_count.value, extra_section.value],
    count_pos
)
</script>
<template>
    <TresGroup :name="`line_${props.number}`">
        <template v-for="i in props.count">
            <template v-if="(i + (props.number - 1) * props.count) <= total" :key="(i + (props.number - 1) * props.count)">
                <ModelFence :index="i + (props.number - 1) * props.count" :models="props.models" />
            </template>
        </template>
    </TresGroup>
</template>