<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import type { Ref } from 'vue'
import { useRoute } from 'vue-router';

import { Vector3 } from 'three';
import { TresCanvas, useLoader } from '@tresjs/core';
import { OrbitControls, Stats } from '@tresjs/cientos'
import '@tresjs/leches/styles'

import LoadModels from './load_models.vue'
import Sidebar from './sidebar.vue'
import { usePromoSidebar } from '../../stores/promo_sidebar';
import { PROMOBG } from '../../constants';
import { useLoading } from '../../stores/loading';

const minPan = ref(new Vector3(-2, -2, -2))
const maxPan = ref(new Vector3(2, 2, 2))
const _v = new Vector3();
const onChange = (e: any) => {
    if (e.target) {
        _v.copy(e.target);
        e.target.clamp(minPan.value, maxPan.value);
        _v.sub(e.target);
        camera.value.position.sub(_v);
    }
}
const loadedPan = (max: any, min: any) => {
    maxPan.value = max
    minPan.value = min
}
const sidebar = usePromoSidebar()
const loading_store = useLoading()

const camera = ref()
const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>

const controlsState = reactive({
    enableDamping: true,
    maxPolarAngle: (Math.PI / 2) - 0.07,
    minAzimuthAngle: (Math.PI / 2) - 0.20,
})
const models_loading = ref(true)
const set_model_load_status = (status: boolean) => {
    models_loading.value = status
}

const route = useRoute()
const source = ref(route.params.target ? (route.params.target.toString() + '/') : '1/')
watch(() => route.params.target, () => {
    let t = '1/'
    if (route.params.target) t = route.params.target.toString() + '/'
    if (source.value !== t) {
        source.value = t
        models_loading.value = true
        sidebar.close()
    }
}, { deep: true })


const sidebarFunc = () => {
    if (sidebar.is_open) {
        sidebar.close()
    } else {
        sidebar.open()
    }
}
</script>
<template>
    <div>
        <div v-if="models_loading"
            style="position: absolute;z-index: 10;font-size: 6rem;text-align: center;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);">
            {{loading_store.getStatus()}}
        </div>
        <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
            <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="PROMOBG"
                :shadows="false">
                <Stats />
                <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                <Suspense>
                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" />
                </Suspense>
            </TresCanvas>
            <div class="homelink" :class="[{ open: sidebar.is_open }]">
                <a href="#" @click.prevent="sidebarFunc">
                    <i-mdi-chevron-left />
                </a>
            </div>
            <div class="homelink main" v-if="route.params.item">
                <RouterLink :to="`/${route.params.item.toString()}`" @click.prevent="sidebarFunc">
                    <i-mdi-home />
                </RouterLink>
            </div>
        </div>
        <Sidebar />
    </div>
</template>
<style scoped lang="scss">
.canvas-wrapper {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.loading {
    filter: blur(10px);
    transition: all 300ms linear;
}
</style>