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

const controlsState = reactive({
    minDistance: 1,
    maxDistance: 10,
    enablePan: false,
    // enableZoom: false,
    maxPolarAngle: (Math.PI / 2) - 0.2,
})

const explosion_state = useState<boolean>('explosion_state', () => false)
const toggleExpState = () => {
    explosion_state.value = !explosion_state.value
}
</script>
<template>
    <div class="h-96 relative">
        <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
            <TresCanvas preset="realistic" heoght="600">
                <TresPerspectiveCamera :position="[-7, 2, 4]" />
                <OrbitControls v-bind="controlsState" make-default />
                <Suspense v-if=false>
                    <Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="false" />
                </Suspense>
                <ModelDiagram />

                <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="#f2f2f2" cast-shadow />
                <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="#f2f2f2" cast-shadow />
                <TresAmbientLight />
            </TresCanvas>
        </ClientOnly>
        <span class="cursor-pointer absolute text-3xl top-0 left-0" @click="toggleExpState">
            <Icon name="mdi:checkbox-outline" v-if="explosion_state" />
            <Icon name="mdi:square-outline" v-else />
        </span>
    </div>
</template>

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