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

const container = ref<HTMLElement | null>(null);
const { isIntersecting, startObserver, stopObserver } = useSceneVisibility();

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

const explosion_state = use_explosion_state()
const toggleExpState = () => {
    explosion_state.value = !explosion_state.value
}

const changeDistance = (v = 1) => {
    if (camera.value && controls.value) {
        const distance = camera.value.position.distanceTo(new Vector3(0, 0, 0));
        const r = distance + v
        camera.value.position.normalize().multiplyScalar(r)
    }
}

const renderMode = computed(() => (isIntersecting.value ? 'always' : 'manual'));

onMounted(async () => {
    if (container.value) {
        await nextTick()
        startObserver(container.value);
    }
});

onBeforeUnmount(() => {
    stopObserver();
});
</script>
<template>
    <Suspense>
        <div ref="container" class="h-96 relative">
            <ClientOnly fallback-tag="div">
                <template #fallback>
                    <div class="fallback">
                        Загрузка 3D модели
                    </div>
                </template>
                {{ renderMode }}
                <TresCanvas height="600">
                    <ModelUpdateRenderMode :render-mode="renderMode" />
                    <TresPerspectiveCamera :position="[-7, 2, 4]" ref="camera" />
                    <OrbitControls v-bind="controlsState" ref="controls" make-default />
                    <Suspense>
                        <ModelEnv />
                    </Suspense>
                    <Suspense>
                        <ModelDiagram />
                    </Suspense>
                </TresCanvas>
            </ClientOnly>
            <div class="canvas-icons">
                <a href="#" @click.prevent="toggleExpState">
                    <Icon name="mdi:arrow-collapse-horizontal" v-if="explosion_state" />
                    <Icon name="mdi:arrow-expand-horizontal" v-else />
                </a>
                <a href="#" @click.prevent="changeDistance(-0.5)"
                    :class="[{ 'disabled': camera ? (camera.position.distanceTo(new Vector3(0, 0, 0)) <= controlsState.minDistance) : null }]">
                    <Icon name="mdi:plus-circle-outline" />
                </a>
                <a href="#" @click.prevent="changeDistance(0.5)"
                    :class="[{ 'disabled': camera ? (camera.position.distanceTo(new Vector3(0, 0, 0)) >= (controlsState.maxDistance)) : null }]">
                    <Icon name="mdi:minus-circle-outline" />
                </a>
            </div>
        </div>
    </Suspense>
</template>

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