<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'
//@ts-ignore
import { useGLTF, Stats } from '@tresjs/cientos'
import { degToRad } from 'three/src/math/MathUtils.js';

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

const controlsState = reactive({
    distance: section_count.value,
    minDistance: 10,
    maxDistance: 10,
    position: { x: 0, y: 0, z: 0 },
    enablePan: false,
    enableZoom: false,
    minPolarAngle: degToRad(45),
    maxPolarAngle: degToRad(45),
})
const cameraStat = reactive({
    position: [-5, 7, 5],
    aspect: 1920 / 600,
    // fov: 40,
})

const pointLight = ref()
const loadAll = async () => {
    const { scene: light } = await useGLTF('/models_light/zabor_so_svetom.glb')
    pointLight.value = light.children[2].clone()
    pointLight.value.intensity = pointLight.value.intensity * 0.05
    pointLight.value.shadow.bias = -0.002
    const j = 4
    pointLight.value.shadow.mapSize.x = 512 * j
    pointLight.value.shadow.mapSize.y = 512 * j

    const k = 1
    // pointLight.value.position.x = pointLight.value.position.x * k
    // pointLight.value.position.y = pointLight.value.position.y * k
    // pointLight.value.position.z = pointLight.value.position.z * k
    pointLight.value.position.x = pointLight.value.position.x * k
    pointLight.value.position.y = pointLight.value.position.z * k
    pointLight.value.position.z = pointLight.value.position.z * k
}
const camera = ref("camera")

onMounted(() => {
    cameraStat.aspect = window.innerWidth / (window.innerHeight * 0.5)
    loadAll()
})
watch([section_count, extra_section], () => {
    let v = (section_count.value + ~~(!!extra_section.value));
    if (v <= 10) v = 10
    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 clear-color="#ccc">
                <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                <OrbitControls v-bind="controlsState" make-default />
                <TresGroup>
                    <Suspense>
                        <ModelParametric />
                    </Suspense>
                </TresGroup>
                <TresMesh receive-shadow name="ground">
                    <TresCircleGeometry :args="[50, 32]" :rotate-x="-Math.PI * 0.5" />
                    <TresShadowMaterial :opacity="0.2" />
                </TresMesh>

                <template v-if="pointLight">
                    <TresPointLight v-bind="pointLight.clone()" cast-shadow />
                    <TresPointLight v-bind="pointLight.clone()" :position-x="pointLight.position.x * -1"
                        :position-z="pointLight.position.z * -1" cast-shadow />
                </template>
                <TresAmbientLight intensity="10" />
            </TresCanvas>
        </ClientOnly>
    </div>
</template>