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

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

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

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 camera = ref()
const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>

const controlsState = reactive({
    enableDamping: false,
    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 })

</script>
<template>
    <div>
        <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
            <TresCanvas window-size :alpha="false" power-preference="high-performance" clear-color="MediumSlateBlue"
                :logarithmicDepthBuffer="true">
                <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">
                <a href="#" @click.prevent="sidebar.open" v-if="!sidebar.is_open">
                    <i-mdi-page-previous-outline />
                </a>
                <RouterLink to="/promo/main/">
                    <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;
}

.homelink {
    position: absolute;
    right: 2rem;
    bottom: 2rem;

    svg {
        font-size: 3rem;
        padding: 1.5rem;
    }

    a {
        margin-top: 2rem;
        border-radius: 50%;
        border: 1px solid white;
        background: white;
        line-height: 1;
        font-size: 0;
        display: block;
    }
}
</style>