<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { Stats, OrbitControls } from '@tresjs/cientos'
import { degToRad } from 'three/src/math/MathUtils.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 defDistance = 3
const controlsState = reactive({
    distance: section_count.value,
    minDistance: defDistance,
    maxDistance: defDistance,
    position: { x: 0, y: 0, z: 0 },
    enablePan: false,
    enableZoom: false,
    minPolarAngle: degToRad(60),
    maxPolarAngle: degToRad(90),
})
const cameraStat = reactive({
    position: [0, 0, 5],
    aspect: 1920 / 600,
    // fov: 40,
})

const camera = ref("camera")

watch([section_count, extra_section], () => {
    let v = (section_count.value + ~~(!!extra_section.value));
    if (v <= defDistance) v = defDistance
    controlsState.minDistance = v;
    controlsState.maxDistance = v;
    (camera.value as any).position.normalize().multiplyScalar(v)
})
</script>
<template>
    <div class="container min-w-full siteblock_calc-canvas">
        <ClientOnly fallback-tag="div">
            <template #fallback>
                <div class="fallback">
                    Загрузка 3D модели
                </div>
            </template>
            <Loader />
            <Stats />
            <TresCanvas  shadows>
                <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                <OrbitControls v-bind="controlsState" make-default />
                <TresGroup :position-y="-0.5">
                    <Suspense>
                        <ModelParametric />
                    </Suspense>
                </TresGroup>

            </TresCanvas>
        </ClientOnly>
    </div>
</template>