<template>
    <v-navigation-drawer width="133">
        <v-btn-toggle variant="tonal" density="comfortable" class="ma-3" v-model="renderType" color="light-blue-darken-4">
            <v-btn value="ST" icon="mdi-video-3d-variant"></v-btn>
            <v-btn value="VR" icon="mdi-google-cardboard"></v-btn>
            <v-btn value="AG" icon="mdi-glasses"></v-btn>
        </v-btn-toggle>
        <v-btn-toggle variant="tonal" density="comfortable" class="ma-3" v-model="mode" color="green-darken-4">
            <v-btn class="text-none" value="translate" icon="mdi-cursor-move"></v-btn>
            <v-btn class="text-none" value="rotate" icon="mdi-rotate-orbit"></v-btn>
            <v-btn class="text-none" value="scale" icon="mdi-resize"></v-btn>
        </v-btn-toggle>
        <v-btn-toggle variant="tonal" v-model="cameraType" class="ma-3" density="comfortable" color="orange-darken-4">
            <v-btn value="perspective" icon="mdi-cone"></v-btn>
            <v-btn value="orthographic" icon="mdi-cone-off"></v-btn>
        </v-btn-toggle>
        <v-btn-toggle variant="tonal" v-model="store.prefs.xr.depthSense" class="ma-3" density="comfortable" color="green-darken-2">
            <v-btn :value="true" icon="mdi-cube-outline"></v-btn>
        </v-btn-toggle>
        <v-btn icon="mdi-walk" @click="control"></v-btn>
    </v-navigation-drawer>
    <div class="container my-3 position-relative game-designer-canvas">
        <div ref="target" @click="targetClick"
            @mousedown="targetPointer($event, 'start')" 
            @mousemove="targetPointer($event, 'drag')" 
            @mouseup="targetPointer($event, 'end')" 
            @pointerdown="targetPointerDown"></div>
    </div>
    <!-- <v-toolbar density="compact">
        <v-slide-group show-arrows>
            <v-slide-group-item v-for="(a, i) in objectAnimations" :key="i" v-slot="{ isSelected }">
                <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2"
                    :prepend-icon="'mdi-' + (a.playing ? 'stop' : 'play')" rounded @click="toggleAnimation(a)">
                    {{ a.name }}
                </v-btn>
            </v-slide-group-item>
        </v-slide-group>
    </v-toolbar> -->
    <v-navigation-drawer location="right">
        <v-list v-model:selected="scenesList" selectable color="primary">
            <v-list-item v-for="(s, i) in scenes" :key="i" :title="s.data.title" :value="s"></v-list-item>
        </v-list>
        <v-list selectable v-model:selected="objectsList" color="secondary">
            <v-list-item v-for="(v, k) in sceneObjects" :title="v.__title" :subtitle="k" :value=v>
                <template v-slot:prepend>
                    <v-btn variant="plain" density="comfortable" size="small" v-if="v.__o"
                        :icon="`mdi-eye${v.__o.visible ? '' : '-off'}`"
                        @click.stop="v.__o.visible = !v.__o.visible"></v-btn>
                    <!-- <v-icon :icon="components[item.name].icon" size="small"></v-icon> -->
                </template>
            </v-list-item>
        </v-list>
    </v-navigation-drawer>
    <video class="d-none" src="/asset/default/57.mp4" ref="videoPlayer"></video>
</template>

<script>

import { useAppStore } from '@/stores/app';

import GameEnvironmentMixin from '@/mixins/GameEnvironmentMixin';

const store = useAppStore();

let gameEngine = null;

export default {
    mixins:[GameEnvironmentMixin],
    props:{
        modelValue: Object,
    },
    data(){
        return {
            env: 'GamePreview',
            scenesList: [],
            objectsList: [],
            mode: 'translate',
            pointerDownTime: 0,
            scenario: null,
            renderType: 'ST',
            cameraType: 'perspective',
            store
        }
    },
    methods:{
        // async loadEnvironment(scene, target){
        //     //await gameEngine.loadPanorama(`/asset/default/55/panorama-vaya.webp`);
        //     await gameEngine.loadPanorama(`/asset/default/36.jpg`);
        //     await this.expandScenarioData(scene);
        //     //gameEngine.activeObjects.scale.set(0.033, 0.033, 0.033)
        //     gameEngine.activeObjects.clear();
        //     target.objects = target.objects || {};
        //     let l = target.objects;
        //     if (this.scene.data.$environment.type == 'panorama2d'){
        //         //await gameEngine.loadPanorama(`/asset/default/${this.scene.data.$environment.asset.name}`);
        //     }else{
        //         let env = await gameEngine.load(`/asset/default/${this.scene.data.$environment.asset.name}`);
        //         this.setObjectAttributes(l, this.scene.data, env, 100);
        //         gameEngine.activeObjects.add(env.scene);
        //         gameEngine.scene.environmentRotation.y = Math.PI / 8;
        //         // if (env.scene.children[0]?.material?.map){
        //         //     let emap = env.scene.children[0].material.map.clone()
        //         //     emap = new gameEngine.$.Texture(emap.source.data, gameEngine.$.EquirectangularReflectionMapping)
        //         //     emap.mapping = gameEngine.$.EquirectangularReflectionMapping;
        //         //     emap.needsUpdate = true;
        //         //     emap.updateMatrix()
        //         //     emap.repeat.set(-1,-1)
        //         //     gameEngine.scene.environment = gameEngine.scene.background = emap
        //         //     console.log('env',emap)
        //         //     gameEngine.scene.environmentRotation.y = Math.PI / 2;
        //         // }
        //     }
        //     for (let i of this.scene.data.items || []) {
        //         let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
        //         this.setObjectAttributes(l, i.data, gltf, 1);
        //         gameEngine.activeObjects.add(gltf.scene);
        //         if (i.data.$go.type == 'player3d'){
        //             let hero = new Hero(gltf, i.data.$go);
        //             hero.init(gameEngine);
        //         }else{
        //             if (gltf.animations?.length){
        //                 gameEngine.playAnimation(gameEngine.scene, gltf.animations[0]);
        //             }
        //         }
        //         //console.log(JSON.stringify(l));
        //         //window.gameEngine = gameEngine;
        //         //console.log(new gameEngine.$.Euler({"isEuler":true,"_x":0,"_y":0,"_z":0,"_order":"XYZ"}));
        //     }
        //     if (l.camera){
        //         // gameEngine.camera.position.copy(l.camera.position)
        //         // gameEngine.camera.rotation.copy(l.camera.position)
        //         // gameEngine.camera.scale.copy(l.camera.position)
        //     }

        //     // let testGame1 = new Game1(gameEngine, '/static/textures/game1-test.jpg', 2, 3);
        //     // gameEngine.activeObjects.add(testGame1.object);
        //     // testGame1.object.position.set(0, 1, -15);

        //     // let testGame2 = new Game2(gameEngine, '/static/textures/game2-test.jpg', 3, 3);
        //     // gameEngine.activeObjects.add(testGame2.object);
        //     // testGame2.object.position.set(0, 1, 15);
        //     // testGame2.object.rotation.y += Math.PI;

        //     // let testGame4 = new Game4(gameEngine, '/static/feathers-game.glb', 3, 4);
        //     // gameEngine.activeObjects.add(testGame4.object);
        //     // testGame4.object.position.set(15, 1, 5);

        //     // let vp = new VideoPlayer(gameEngine, this.$refs.videoPlayer, 16, 9);
        //     // gameEngine.activeObjects.add(vp.object);
        //     // vp.object.position.set(37, 5.5, 15);
        //     // vp.object.rotation.y += -Math.PI/2;

        //     // let maze = new MazeQuizGame(gameEngine, {}, [
        //     //     {
        //     //         q: 'Атанасовското езеро е дълго около 10км.', 
        //     //         a:['Вярно', 'Невярно'], 
        //     //         h: 'Грешен отговор. Атанасовското езеро е дълго около 10км.'
        //     //     },
        //     //     {
        //     //         q: 'Колко дълбоко е Атанасовското езеро?', 
        //     //         a:['Около 35см', 'Около 3.5м', 'Метър и половина'], 
        //     //         h: 'Грешен отговор. Атанасовското езеро е дълбоко средно около 35см.'
        //     //     },
        //     //     {
        //     //         q: 'Колко вида птици се наблюдават в Атанасовското езеро?', 
        //     //         a: ['Повече от 330 вида', 'Над 10 вида', 'Над 450 вида'], 
        //     //         h: 'Грешен отговор. В Атанасовското езеро са наблюдавани над 330 вида птици'
        //     //     },
        //     //     {
        //     //         q: 'Какво е Via Pontica?', 
        //     //         a: ['Миграционният път на птиците, минаващ покрай Бургаските езера', 'Рядък вид птица', 'Местност в гр. Бургас'], 
        //     //         h: 'Грешен отговор. Via Pontica наричаме миграционния път на птиците'
        //     //     },
        //     //     {
        //     //         q: 'What stands for "Via Pontica"?', 
        //     //         a: ['The migration route of birds passing by the Burgas lakes', 'A rare species of bird', 'Location in Burgas'], 
        //     //         h: 'Wrong answer. Via Pontica is the name given to the migratory route of birds.'
        //     //     },
        //     //     {
        //     //         q: 'Къдроглавият пеликан...', 
        //     //         a: ['...има огромен жълт клюн', '...има малък розов клюн', '...не се среща в България'], 
        //     //         h: 'Грешен отговор. Къдроглавият пеликан има огромен жълт клюн'
        //     //     },
        //     // ])
        //     // maze.load().then(o=>{
        //     //     gameEngine.activeObjects.add(o);
        //     //     //o.scale.set(5,5,5);
        //     // })

        //     // new Grass(Grass.positions(1000,50,50), '/static/textures/grass01.png', 1, .5).then(mesh=>{
        //     //     console.log('adding grass')
        //     //     gameEngine.scene.add(mesh);
        //     // })

        //     // new Grass(Grass.positions(250,50,50), '/static/textures/flowers01.png', 1, .75).then(mesh=>{
        //     //     gameEngine.scene.add(mesh);
        //     //     console.log('adding grass')
        //     // })

        //     // new Grass(Grass.positions(250,50,50), '/static/textures/flowers02.png', 1, .75).then(mesh=>{
        //     //     gameEngine.scene.add(mesh);
        //     //     console.log('adding grass')
        //     // })
        // },
    }
}
</script>