<template>
    <div v-show="forRendering">
        <div class="position-relative">
            <div ref="target"></div>
            <div class="renderer-gizmo"></div>
        </div>
        <v-slide-group show-arrows>
            <v-slide-group-item v-for="(a, i) in animations" :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>
    </div>
    <img v-if="obj && !forRendering && obj.type == 'object2d'" :src="`/asset/default/${obj.asset?.name}`" />
    <video v-if="obj && !forRendering && obj.type == 'video'" controls :autoplay="autoplay ? 'autoplay' : ''" 
        :src="`/asset/default/${obj.asset?.name}`"></video>
    <audio v-if="obj && !forRendering && obj.type == 'audio'" controls :autoplay="autoplay ? 'autoplay' : ''" 
        :src="`/asset/default/${obj.asset?.name}`" class="d-block w-100"></audio>
</template>

<script>
import { GameEngine } from '@/lib/GameEngine.js';
import { autoScale } from '@/lib/MeshUtils';
let gameEngine = null;

export default{
    props:{
        object: Object,
        objectId: Number,
        autoplay: Boolean
    },
    data(){
        return {
            animations: [],
            obj: null
        }
    },
    async mounted(){
        if (this.object) {
            this.obj = this.object;
        }else{
            this.obj = (await this.$api.gameObject.load(this.objectId)).data; 
        }
    },
    beforeUnmount() {
        gameEngine?.stop();
    },
    watch:{
        async obj(){
            gameEngine = new GameEngine();
            this.gameEngine = gameEngine;
            await gameEngine.init(this.$refs.target, {gizmo: true});
            await this.loadAsset();
        }
    },
    computed:{
        forRendering() {
            return this.$p.objectTypes.find(t=> t.value == this.obj?.type)?.render
        }
    },
    methods:{
        async loadAsset() {
            if (this.forRendering) {
                gameEngine.activeObjects.clear();
                if (this.obj.type == 'panorama2d') {
                    await gameEngine.loadPanorama(this.obj.asset.name);
                    // let t = await gameEngine.loadTexture(`/asset/default/${this.obj.asset.name}`);
                    // t.mapping = gameEngine.$.EquirectangularReflectionMapping;
                    // gameEngine.scene.background = t;
                    // gameEngine.scene.environment = t;
                    // gameEngine.scene.add(gameEngine.camera);
                } else {
                    let gltf = await gameEngine.load(this.obj.asset.name);
                    //console.debug('GLTF', gltf);
                    this.loadedAsset = gltf;
                    this.animations = gltf.animations.map(a => ({
                        name: a.name, id: a.uuid
                    }));
                    autoScale(gltf.scene);
                    let bb = new gameEngine.$.Box3().setFromObject(gltf.scene);
                    gltf.scene.traverse(function (o) {
                        o.frustumCulled = false;
                    });
                    //console.log(bb)
                    gameEngine.camera.position.set(bb.max.x, bb.max.y, bb.max.z);
                    gameEngine.orbitControls.target.set((bb.max.x + bb.min.x) / 2, (bb.max.y + bb.min.y) / 2, (bb.max.z + bb.min.z) / 2)
                    gameEngine.orbitControls.update();
                    gameEngine.activeObjects.add(gltf.scene);
                    //gameEngine.scene.add(gameEngine.light);
                }
            }
        },

        async toggleAnimation(animation){
            animation.playing = !animation.playing;
            gameEngine.playAnimation(
                gameEngine.scene, 
                this.loadedAsset.animations.find(a=>a.uuid == animation.id),
                animation.playing
            );
        },
    }
}
</script>