<script setup lang="ts">
import { Mesh, Object3D, Vector3 } from 'three';
//@ts-ignore
import { OrbitControls, useGLTF, } from '@tresjs/cientos'
import type { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';

const section_count = use_section_count()
const extra_section = use_extra_section()
const lamelles_count = use_lamelles_count()
const lamelle_height = use_lamelle_height()
const fence_section = use_fence_section()

const { scene, controls, camera } = useTresContext()
const { seek, seekAll } = useSeek()

const { scene: top_model } = await useGLTF('/models_one/verh_100.glb', { draco: true })
const { scene: model_fence_top } = await useGLTF('/fence_one/top.glb')
const { scene: model_fence_center } = await useGLTF('/fence_one/center.glb')
const { scene: model_fence_bottom } = await useGLTF('/fence_one/bottom.glb')
const { scene: model_fence_inner } = await useGLTF('/fence_one/inner.glb')
const { scene: fastening_model } = await useGLTF('/models_one/krepleniye_planok.glb', { draco: true });
const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true });

const top = ref(top_model)
const fence = ref(model_fence_center)
const fence_top = ref(model_fence_top)
const fence_bottom = ref(model_fence_bottom)
const fence_inner = ref(model_fence_inner)
const fastening = ref(fastening_model)
const lamelle = ref(lamelle_model)

const total = ref((section_count.value + ~~(!!extra_section.value)))
const size = ref(Math.ceil(total.value / 4))
const count = ref((total.value >= 4) ? size.value : total.value)

watch(() => [section_count.value, extra_section.value], () => {
    total.value = (section_count.value + ~~(!!extra_section.value))
    size.value = Math.ceil(total.value / 4);
    count.value = (total.value >= 4) ? size.value : total.value;

    const lines_count = (total.value >= 4) ? 4 : 1
    const base = seek(scene.value, 'name', 'base')
    if (base?.children && base.children.length !== lines_count) {
        base.children = [...base?.children.slice(0, lines_count)]
    }

    const lines = seekAll(scene.value, 'name', 'line')
    lines.forEach(line => {
        let n = size.value
        if (lines_count == 1) {
            n = total.value
        }
        if (line.name.endsWith('_4')) {
            n = total.value - size.value * 3
            if (n < 0) {
                n = 0
            }
        }
        const inner = seek(line, 'name', line.name + '_inner');
        if (inner?.children && n < inner?.children.length) {
            inner.children = [...inner?.children.slice(0, n)]
        }
    });
})
const setTarget = () => {
    let f = fence_section.value * lamelles_count.value * lamelle_height.value * 0.75
    if (f < 3) f = 3
    console.log(f)
    const target = new Vector3(0, lamelles_count.value * lamelle_height.value * 0.5, 0);
    (controls.value as OrbitControlsProps).target = target
    camera.value?.position.set(f, f, f)
}
setTarget()
watch([lamelles_count, fence_section], setTarget)

</script>
<template>
    <TresGroup name="base">
        <template v-for="line in (total >= 4) ? 4 : 1" :key="`${line}_${count}`">
            <ModelLine :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" :number="line"
                :count="count" />
        </template>
    </TresGroup>
    <Suspense>
        <ModelRecolor :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" />
    </Suspense>
</template>