<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>
        <template v-if="currentObject?.__o">
            <v-card subtitle="Position" class="ma-1" color="light-blue-darken-4">
                <v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="x" v-model="currentObject.__o.position.x"></v-number-input>
                <v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="y" v-model="currentObject.__o.position.y"></v-number-input>
                <v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="z" v-model="currentObject.__o.position.z"></v-number-input>
            </v-card>
            <v-card subtitle="Rotation" class="ma-1" color="green-darken-4">
                <v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="x" v-model="currentObject.__o.rotation.x"></v-number-input>
                <v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="y" v-model="currentObject.__o.rotation.y"></v-number-input>
                <v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="z" v-model="currentObject.__o.rotation.z"></v-number-input>
            </v-card>
            <v-card subtitle="Scale" class="ma-1" color="pink-darken-4">
                <v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="x" v-model="currentObject.__o.scale.x"></v-number-input>
                <v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="y" v-model="currentObject.__o.scale.y"></v-number-input>
                <v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="z" v-model="currentObject.__o.scale.z"></v-number-input>
            </v-card>
        </template>
    </v-navigation-drawer>
    <div class="container my-3 position-relative game-designer-canvas">
        <div ref="target" @click="targetClick" @pointerdown="targetPointerDown"></div>
        <div class="renderer-gizmo"></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>
</template>

<script>

import GameEnvironmentMixin from '@/mixins/GameEnvironmentMixin';

export default {
    mixins: [GameEnvironmentMixin],
    props:{
        modelValue: Object,
    },
    data(){
        return {
            env: 'GameDesigner',
            scenesList: [],
            objectsList: [],
            mode: 'translate',
            pointerDownTime: 0,
            scenario: null,
            renderType: 'ST',
            cameraType: 'perspective'
        }
    },

    methods:{

    }
}
</script>