<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { Ref } from 'vue'
import { Vector3 } from 'three';

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


import Env from './env.vue'
import LoadModels from './load_models.vue'
import { usePromoSidebar } from '../../stores/promo_sidebar';

const sidebar = usePromoSidebar()

const _v = new Vector3();
const onChange = (e: any) => {
    // console.log(e._camera.position.normalize())
    _v.copy(e._target);
    // e._target.clamp(minPan, maxPan);
    _v.sub(e._target);
    e._camera.position.sub(_v);
}

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

const controlsState = reactive({
    maxPolarAngle: (Math.PI / 2) - 0.02,
    enableZoom: false,
})

const { hasFinishLoading, progress } = await useProgress()

const point_light = reactive({
    intensity: 1000,
    position: new Vector3(-100, 50, 5),
})

</script>
<template>
    <div>
        <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
            Загрузка {{ progress }}%
        </div>
        <div :class="[{ 'invisible': !hasFinishLoading }]">
            <TresCanvas shadows window-size>
                <Suspense>
                    <StatsGl />
                </Suspense>
                <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                <CameraControls v-bind="controlsState" @change="onChange" make-default />
                <Suspense>
                    <Env />
                </Suspense>
                <Suspense>
                    <LoadModels />
                </Suspense>
                <TresMesh cast-shadow>
                    <TresBoxGeometry :args="[1, 1, 1]" />
                    <TresMeshStandardMaterial />
                </TresMesh>
                <TresMesh :position-y="0" :rotate-x="-Math.PI / 2" receive-shadow>
                    <TresPlaneGeometry :args="[200, 200]" />
                    <TresShadowMaterial :opacity="0.2" />
                </TresMesh>
                <TresPointLight v-bind="point_light" cast-shadow />
            </TresCanvas>
        </div>
        <div class="sidebar" :class="[{ 'open': sidebar.is_open }]">
            <a href="#" @click.prevent="sidebar.close" class="sidebar-close">
                <i-mdi-close />
            </a>
            <template v-if="sidebar.is_open">
                <h2>{{ sidebar.title }}</h2>
                <template v-for="p in sidebar.description.split('\n')">
                    <p>{{ p }}</p>
                </template>
            </template>
        </div>
    </div>
</template>
<style scoped lang="scss">
.invisible {
    visibility: hidden;
}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    min-height: 100vh;
}

.sidebar {
    width: 23vw;
    background-color: #fff;
    position: fixed;
    top: 0;
    right: -27vw;
    bottom: 0;
    transition: all 300ms linear;

    padding: 2rem;

    &.open {
        right: 0
    }

    &-close {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 2rem;
        color: black
    }

    h2 {
        text-align: center;
        font-size: 1.65rem;
        margin: 1rem
    }

    p {}
}
</style>