<template>
   <v-container fluid class="d-flex flex-wrap">
        <v-chip :text="'All'" class="mt-2 mr-2" @click="selectedTypes = selectedTypes.length ? [] : $p.objectTypes.map(f => f.value)" filter></v-chip>
        <v-chip-group variant="flat" v-if="!hideFilter" multiple column v-model="selectedTypes">
            <v-chip v-for="(f, i) in $p.objectTypes" :key="i" :text="l[f.value]" :value="f.value" :color="f.color"
                filter></v-chip>
        </v-chip-group>
        <v-text-field :loading="loading" append-inner-icon="mdi-magnify" density="compact" :label="l.search"
            hide-details @update:model-value="debounce(load, 500, true);" rounded v-model="textSearch"></v-text-field>
    </v-container>
   
    <v-container class="asset-browser">
        <v-row>
            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative img-preview">
                <div class="position-relative img-wrapper">
                    <img :src="`/asset/thumb/${v.asset?.thumb}`" class="cursor-pointer"></img>
                    <div class="btn-play position-absolute cursor-pointer top-0 right-0 w-100 h-100 d-flex justify-center align-center" @click.self="$emit('select', v)">
                        <v-btn icon="mdi-play" @click="preview(v)" variant="elevated" color="light-blue-darken-4" size="x-large"></v-btn>
                        <slot name="action-buttons" v-bind:object="v"></slot>
                    </div>
                </div>
                <div class="d-flex">
                    <span class="flex-grow-1">{{ v.name }}</span>
                    <v-btn class="position-absolute top-0 left-0 ma-5" density="comfortable" size="small" rounded
                           :color="$p.objectTypes.find(t=>t.value == v.type).color"
                           :icon="`mdi-${ $p.objectTypes.find(t=>t.value == v.type).icon }`">
                    </v-btn>
                </div>
            </v-col>
        </v-row>
    </v-container>
    <v-dialog v-model="previewDialog" width="auto" max-width="1200">
        <AssetPreview :object="previewObject" autoplay></AssetPreview>
    </v-dialog>
</template>

<script>
import Utils from '#/app/Utils';
export default {
    props:[
        'modelValue', 'query', 'hideFilter'
    ],
    emits:['select', 'preview'],
    data(){
        return {
            items: [],
            q: {},
            selectedTypes: this.$p.objectTypes.map(f=>f.value),
            previewObject: null,
            previewDialog: false,
            loading: false,
            textSearch: '',
            tags: []
        }
    },
    
    async created(){
        await this.load();
    },

    watch:{
        async selectedTypes(n){
            this.q.type = { '*in': n };
            await this.load();
        }
    },

    methods:{
        async load(){
            this.loading = true;
            Object.assign(this.q, this.query || {});
            if (this.textSearch) {
                this.q['*or'] = [
                    { name: { '*regex': Utils.escapeRegExp(this.textSearch), '*options': 'i' } },
                    { tags: { '*regex': Utils.escapeRegExp(this.textSearch), '*options': 'i' } },
                    { description: { '*regex': Utils.escapeRegExp(this.textSearch), '*options': 'i' } }
                ];
            }else{
                delete this.q['*or'];
            }
            this.items = (await this.$api.gameObject.search(this.q)).data.data;
            this.loading = false;
            this.tags = await this.$api.gameObject.getTags(this.textSearch || null);
        },
        preview(v){
            this.previewObject = v;
            this.previewDialog = true;
        },
    }
}
</script>