<template>
    <div class="container my-3 position-relative game-designer-canvas">
        <div ref="target" @click="targetClick" class="canvas-wrapper"
            @mousedown="targetPointer($event, 'start')" 
            @mousemove="targetPointer($event, 'drag')" 
            @mouseup="targetPointer($event, 'end')" ></div>
    </div>
    <v-navigation-drawer width="133" rail location="right" class="mt-3">
        <v-menu open-on-hover open-on-click>
            <template v-slot:activator="{ props }">
                <v-btn icon="mdi-panorama-outline" color="primary" v-bind="props"></v-btn>
            </template>
            <v-list selectable color="primary" @update:selected="loadScene($event[0])" :items="scenes"></v-list>
        </v-menu>
        <v-divider class="my-2"></v-divider>
        <v-btn variant="text" icon="mdi-walk" @click="control" v-tooltip="`Pointer lock controls mode`"></v-btn>
        <v-btn variant="text" icon="mdi-image-frame" @click="setGameHeader" v-tooltip="`Capture screenshot as game header image`"></v-btn>
        <v-btn icon="mdi-fullscreen" @click="fullScreen" variant="text" v-tooltip="l.fullScreen"></v-btn>
        <v-btn-toggle variant="text" v-model="store.prefs.xr.depthSense" color="green-darken-2" v-tooltip="`Toggle XR depth sense`">
            <v-btn :value="true" icon="mdi-cube-outline"></v-btn>
        </v-btn-toggle>
    </v-navigation-drawer>
</template>

<script>
import { GameEngine } from '@/lib/GameEngine';
import { GameManager } from '@/lib/GameManager';
let engine = null, manager = null;

export default {
    props:['id'],
    data(){
        return {
            scenes: []
        }
    },
    async mounted(){
        engine = new GameEngine();
        await engine.init(this.$refs.target, { 
            xr: true, 
            gizmo: false, 
            stats: true, 
            //depthSense: this.store.prefs.xr.depthSense,
            mode: 'GamePreview'
        });
        manager = await new GameManager(engine, this.id);
        this.scenes = manager.scenarioData.scenes.map(s=>({
            title: s.data.title,
            value: s.data.id
        }))
        window.addEventListener('resize', this.resize);
    },

    async unmounted(){
        this.debug('Disposing scene')
        window.removeEventListener('resize', this.resize);
        engine.tm?.setGame(null);
        engine.dispose();
        this.debug('Disposed scene', JSON.stringify(engine.renderer.info.memory));
        engine = null;
        manager = null;
    },

    methods:{
        loadScene(sceneId){
            this.debug('Loading scene', sceneId)
            manager.loadScene(sceneId)
        },
        targetClick(e){
            engine.onClick(e, this.$refs.target);
        },

        targetPointer(e, t){
            engine.onPointer(e, this.$refs.target, t);
        },
        resize(){
            let r = this.$refs.target;
            engine.resize(r.clientWidth, r.clientHeight);
        },

        control(){
            engine.pointerControls.lock(true);
        },

        async fullScreen(){
            await engine.renderer.domElement.requestFullscreen()
        },

        async setGameHeader(){
            let screenshot = await engine.captureScreenshot();
            let fd = new FormData();
            fd.append('file', screenshot);
            await this.$api.game.setHeader(this.id, fd);
        }
    }

}
</script>