<template>
    <div>
        <asset-selector @select="assignGameObject" :type="['GameObject']">
            <template v-slot:activator="props">
                <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>{{ l.chooseGameObject }}</v-btn>
            </template>
        </asset-selector>
        <v-textarea :label="l.description" v-model="modelValue.description" class="mt-3"></v-textarea>
        <v-checkbox density="compact" v-model="modelValue.hud" hide-details :label="l.viewInHUD"></v-checkbox>
        <v-checkbox density="compact" v-model="modelValue.exclude" hide-details :label="l.disableInteractions"></v-checkbox>
        <v-checkbox density="compact" v-model="modelValue.asIndividuals" hide-details label="asIndividuals(experimental)"></v-checkbox>
        
        <v-select :label="l.collisionType" v-model="modelValue.collisionType" density="compact" hide-details
            :items="collisionTypes"></v-select>
        <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
        <div class="text-caption text-center">{{ modelValue.title }}</div>
    </div>
</template>

<script>

export default {
    data(){
        return {
            active: false,
            collisionTypes: []
        }
    },
    mounted(){
        this.active = true;
        this.modelValue.collisionType ??= 'objectDefinied';
        this.collisionTypes = Object.keys(this.l.collisionTypes).map(t=>({title: this.l.collisionTypes[t], value: t}))
    },
    props:{
        modelValue: Object
    },
    methods:{
        assignGameObject(e){
            this.modelValue.go = e.id;
            if (this.modelValue.id == this.modelValue.title){
                this.modelValue.title = e.name
            }
            // if (e.type == 'InteractiveObject'){
            //     this.modelValue.type = e.id;
            // }else{
            //     this.modelValue.type = 'GenericObject'
            // }
        }
    }
}

</script>