<template>
    <div>
        <v-select label="Switch to scene" v-model="modelValue.switchScene" density="compact" 
            :items="scenes"></v-select>
        <v-select label="Switch type" v-model="modelValue.switchType" density="compact"
            :items="switchTypes"></v-select>
        <!-- <div class="text-caption text-center">{{ modelValue.title }}</div> -->
    </div>
</template>

<script>

import { computed } from 'vue';
import OffsetLine from '../SceneDesigner/OffsetLine.vue';

export default {
    components:{ OffsetLine },
    data(){
        return {
            active: false,
            switchTypes: [
                { title: 'Award', value: 'award' },
                { title: 'Sphere', value: 'sphere' },
                { title: 'Sensor', value: 'sensor' }
            ]
        }
    },
    mounted(){
        this.active = true;
    },

    props:{
        modelValue: Object
    },
    computed:{
        scenes(){
            return this.modelValue.__root.scenes.map(s=>({title: s.data.title, value: s.data.id}))
        },
    },
    methods:{

    },

    __transform(data){
        data.go_env = computed(()=>{
            if (data.switchType == 'sphere' && data.switchScene){
                return data.__root.scenes.find(s=>s.data.id == data.switchScene).data.environment;
            }
        })
    }
}

</script>