<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Object3D, Vector3 } from 'three';
import { TresCanvas, useRenderLoop } from '@tresjs/core';
import { vLightHelper } from '@tresjs/core'
import { CameraControls, GlobalAudio, useGLTF, useProgress } from '@tresjs/cientos'

const minPan = new Vector3(-10, 1, -5);
const maxPan = new Vector3(5, 1, 5);
const _v = new Vector3();

const onChange = (e: any) => {
    _v.copy(e._target);
    e._target.clamp(minPan, maxPan);
    _v.sub(e._target);
    e._camera.position.sub(_v);
}

const cameraPosition = [-6, 4, 25] as unknown as Vector3

const controlsState = reactive({
    minDistance: 5,
    maxDistance: 30,
    maxPolarAngle: (Math.PI / 2) - 0.02,
    maxZoom: 1,
    minZoom: 1,
})

const { hasFinishLoading, progress } = await useProgress()
const { scene: spot_light } = await useGLTF('/Spot_light.glb')
const spot_light_item = spot_light.children[0]
const spot_light_target = ref()

const target = new Object3D()
target.translateX(-10)
target.translateZ(10)
target.translateY(0)

const { onLoop } = useRenderLoop()
let step = 0.05
onLoop(() => {
    if (spot_light_target.value) {
        const px = spot_light_target.value.position.x
        if (px >= 10) {
            step = -0.05
        } else if (px <= -10) {
            step = 0.05
        }
        spot_light_target.value.translateX(step)
    }
})
</script>
<template>
    <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
        Загрузка {{ progress }}%
    </div>
    <div :class="[{ 'invisible': !hasFinishLoading }]">
        <TresCanvas window-size alpha shadows clear-color="#87ceeb">
            <TresPerspectiveCamera :position="cameraPosition" />
            <CameraControls v-bind="controlsState" @change="onChange" make-default />

            <!-- <TresGridHelper :args="[50, 50]" /> -->
            <Suspense>
                <Models />
            </Suspense>
            <TresObject3D ref="spot_light_target" :position="[10, 1, 10]"></TresObject3D>
            <TresSpotLight :position="spot_light_item.position" color="pink" :angle="spot_light_item.angle"
                :penumbra="spot_light_item.penumbra" :target="spot_light_target || target" :intensity="500"
                cast-shadow />
            <!-- <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> -->
            <TresAmbientLight :intensity="1" />
        </TresCanvas>
    </div>
</template>
<style scoped>
.invisible {
    visibility: hidden;
}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    min-height: 100vh;
}
</style>