<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, Environment, vLightHelper } from '@tresjs/cientos'

const controlsState = reactive({
    minDistance: 5,
    maxDistance: 12,
    enablePan: false,
    // enableZoom: false,
    maxPolarAngle: (Math.PI / 2) - 0.2,
    // maxZoom: 2,
    // minZoom: 1,
})
const cameraStat = reactive({
    position: [-4, 2, 8],
    aspect: 1920 / 600,
    fov: 40,
})
onMounted(() => {
    cameraStat.aspect = window.innerWidth / 600
})
const spot = reactive({
    x: 10, y: 10, z: 10, intensity: 10, distance: 10, color: 'red'
})
const directional = reactive({
    x: 20, y: 10, z: 10, intensity: 10, distance: 10, color: 'green'
})
const point = reactive({
    x: 30, y: 10, z: 10, intensity: 10, distance: 10, color: 'blue'
})
</script>
<template>
    <div class="container min-w-full relative" v-if="false">
        <div>
            <h2>spot</h2>
            <template v-for="(label, key) in spot">
                <label :for="key">{{ key }}</label>
                <input :id="key" :type="key == 'color' ? 'text' : 'number'" v-model="spot[key]" style="width: 100px" />
            </template>
            <h2>directional</h2>
            <template v-for="(label, key) in directional">
                <label :for="key">{{ key }}</label>
                <input :id="key" :type="key == 'color' ? 'text' : 'number'" v-model="directional[key]"
                    style="width: 100px" />
            </template>
            <h2>point</h2>
            <template v-for="(label, key) in point">
                <label :for="key">{{ key }}</label>
                <input :id="key" :type="key == 'color' ? 'text' : 'number'" v-model="point[key]" style="width: 100px" />
            </template>
        </div>
    </div>
    <div class="container min-w-full relative">
        <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
            <Loader />
            <TresCanvas shadows>
                <TresPerspectiveCamera v-bind="cameraStat" />
                <OrbitControls v-bind="controlsState" make-default />
                <Suspense>
                    <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
                </Suspense>
                <Suspense>
                    <ModelParametric />
                </Suspense>
                <template v-if="false">
                    <TresSpotLight v-bind="spot" :position="[spot.x, spot.y, spot.z]" cast-shadow v-light-helper />
                    <TresDirectionalLight v-bind="directional" :position="[directional.x, directional.y, directional.z]"
                        cast-shadow v-light-helper />
                    <TresPointLight v-bind="point" :position="[point.x, point.y, point.z]" cast-shadow v-light-helper />
                    <TresAmbientLight />
                </template>
            </TresCanvas>
        </ClientOnly>
    </div>
</template>

<style scoped>
.container {
    height: 600px;
    display: block;
}
</style>