<script setup lang="ts">
import { IMAGE_URL, SERVER_URL, } from '../../constants'
import { onMounted, reactive, ref } from 'vue';
import { Vector3 } from 'three';

import { TresCanvas } from '@tresjs/core';
import { CameraControls, useGLTF, useProgress } from '@tresjs/cientos'

import Env from './env.vue'
import ModelItem from './modelItem.vue';

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 point_light = reactive({
    intensity: 10000,
    position: new Vector3(-100, 5, 5),
})
interface element3DType {
    id: number
    model_file: string
    name: string
    description: string
    parent?: number
}
interface model3DType extends element3DType {
    modelUrl?: string
}
const models = ref<model3DType[]>([])
const loadModels = async () => {
    const res = await fetch(`${SERVER_URL}/api/obj/element/?parent__isnull=True`)
    const data = await res.json() as element3DType[]
    for (let index = 0; index < data.length; index++) {
        const element = data[index];
        const item = { ...element } as model3DType
        item.modelUrl = `${IMAGE_URL}/${item.model_file}`
        models.value.push(item)
    }
}
onMounted(() => {
    loadModels()
})
</script>
<template>
    <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
        Загрузка {{ progress }}%
    </div>
    <div :class="[{ 'invisible': !hasFinishLoading }]">
        <TresCanvas window-size>
            <TresPerspectiveCamera :position="cameraPosition" />
            <CameraControls v-bind="controlsState" @change="onChange" make-default />
            <Suspense>
                <Env />
            </Suspense>
            <Suspense>
                <TresGroup v-for="item in models">
                    <ModelItem :model-url="item.modelUrl" />
                </TresGroup>
            </Suspense>
            <TresMesh>
                <TresBoxGeometry :args="[1, 1, 1]" />
                <TresMeshStandardMaterial />
            </TresMesh>
            <TresPointLight v-bind="point_light" />
            <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>