<template>
    <teleport to=".scene-designer .scenes" v-if="active">
        <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{scene: true, selected}" v-show="showInView">
            <svg-icon :src="`/asset/thumb/${modelValue.environment||0}.webp`" :x="vd.x1" :y="vd.y1" :size="65"></svg-icon>
            <text :x="vd.x1" :y="vd.y1" dy="86">{{ modelValue.title }}</text>
            <image v-if="modelValue.environment" href="/static/svg/play-circle.svg" width="20" class="cursor-pointer"
                :x="vd.x1 + 60 - 10" :y="vd.y1 + 60 - 10" @click="$emit('preview', modelValue.environment)">
            </image>
        </g>
    </teleport>
    <v-card :title="modelValue.title" v-if="selected" class="mx-2" variant="text">
        <v-img v-if="modelValue.environment" :src="`/asset/thumb/${modelValue.environment}.webp`" />
        <asset-selector @select="assignEnvironment" :type="['Panorama']">
            <template v-slot:activator="props">
                <v-btn v-bind="props" prepend-icon="mdi-panorama-sphere-outline" block color="light-blue-darken-4">Select environment</v-btn>
            </template>
        </asset-selector>

        <v-img v-if="modelValue.scene" :src="`/asset/thumb/${modelValue.scene}.webp`" />
        <asset-selector @select="assignScene" :type="['Scene']">
            <template v-slot:activator="props">
                <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" block color="orange-darken-3" class="my-4">Select scene</v-btn>
            </template>
        </asset-selector>

        <v-img v-if="modelValue.intro" :src="`/asset/thumb/${modelValue.intro}.webp`" />
        <asset-selector @select="assignIntro" :type="['Video']">
            <template v-slot:activator="props">
                <v-btn v-bind="props" prepend-icon="mdi-filmstrip" block color="deep-orange-darken-4" class="my-4">Select introduction</v-btn>
            </template>
        </asset-selector>

        <asset-selector @select="assignAudio" :type="['Audio']">
            <template v-slot:activator="props">
                <v-btn v-bind="props" prepend-icon="mdi-volume-medium" block color="deep-purple-accent-2" class="my-4">Select ambient sound</v-btn>
            </template>
        </asset-selector>

        <v-form class="py-4">
            <v-text-field density="compact" :label="l.name" v-model="modelValue.title"></v-text-field>
            <v-textarea :label="l.description" v-model="modelValue.description"></v-textarea>
            <v-text-field density="compact" :label="l.id" v-model="modelValue.id"></v-text-field>
        </v-form>
    </v-card>
</template>

<script>
import SvgIcon from './SvgIcon.vue';
import Utils from '@/lib/Utils';
import AssetSelector from '../AssetsManagement/AssetSelector.vue';

export default {
    emits:['target', 'preview'],
    components: { SvgIcon, AssetSelector },
    props:{
        //context: Object,
        modelValue: Object,
        vd: Object,
        selected: Boolean, 
        cid:String, 
        visible: Boolean,
        parent: Object
    },
    data(){
        return {
            active: false
        }
    },
    mounted(){
        this.active = true;
    },
    steps: [['x1', 'y1']],
    name: 'scene',
    modifiers: ['x1', 'y1'],
    computed:{
        showInView(){
            this.vd.__showInView = this.visible;
            return this.vd.__showInView;
        }
    },
    methods:{
        intersect(v){
            return Utils.intersectPointRect([this.vd.x1, this.vd.y1], v);
        },
        assignEnvironment(e){
            this.modelValue.environment = e.id;
        }, 
        assignScene(e){
            this.modelValue.scene = e.id;
            if (this.modelValue.id == this.modelValue.title){
                this.modelValue.title = e.name
            }
        }, 
        assignIntro(e){
            this.modelValue.intro = e.id;
        }, 
        assignAudio(e){
            this.modelValue.audio = e.id;
        }
    }
}
</script>