<template>
    <slot name="activator" v-bind="activatorProps" @click="dialog = !dialog"></slot>
    <v-dialog transition="dialog-bottom-transition" fullscreen v-model="dialog">
        <v-card title="Assets">
            <AssetBrowser :query="query" @select="select" :hideFilter="true"></AssetBrowser>
            <v-card-actions>
                <v-btn :text="l.close" color="primary" @click="dialog = false"></v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>

export default {
    props:[
        'modelValue', 'type'
    ],
    emits:['select'],
    data(){
        return {
            query: {
                type: { '*in': this.$p.objectTypes.filter(t=>!this.type || this.type.includes(t.type)).map(t=>t.value) }
            },
            activatorProps:{},
            dialog: false
        }
    },
    
    async created(){},

    methods:{
        select(v, type){
            this.$emit('select', { id: v.id, name: v.name, type });
            this.dialog = false;
        }
    }
}
</script>