<template>
    <v-container max-width="1400">
        <v-tabs v-model="panel">
            <v-tab value="edit">
                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGameObject : l.editGameObject }}
            </v-tab>
            <v-tab value="preview" v-show="object.asset">
                <v-icon icon="mdi-panorama-outline"></v-icon> {{ l.preview }}
            </v-tab>
        </v-tabs>
        <v-tabs-window v-model="panel">
            <v-tabs-window-item value="edit">
                <v-card class="container my-3">
                    <v-form class="pa-4" v-model="valid">
                        <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
                        <v-textarea :label="l.description" v-model="object.description"></v-textarea>
                        <v-select :label="l.objectType" v-model="object.type" :items="$p.objectTypes.map(ot=>({title:l[ot.value], value:ot.value}))" tit :rules="[rules.required]">
                        </v-select>
                        <v-combobox clearable chips multiple :label="l.tags" v-model="object.tags" :items="tagList">
                            <template v-slot:chip="{ props, item }">
                                <v-chip v-bind="props" label>
                                    <template v-slot:close>
                                        <v-icon icon="$close" size="14"></v-icon>
                                    </template>
                                </v-chip>
                            </template>
                        </v-combobox>
                        <v-file-input :label="l.objectFile" v-model="file" :rules="[rules.requiredFile]"></v-file-input>
                        <div v-if="object.asset" closable-chips deletable-chips :delimiters="[',']">{{ object.asset.name }} | {{ object.asset.ofn }}</div>
                    </v-form>
                    <v-card-actions>
                        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="success"
                            :disabled="!valid">
                            {{ l.save }}
                        </v-btn>
                        <v-btn @click="save({preview: true})" :loading="loading" prepend-icon="mdi-content-save" color="primary"
                            :disabled="!valid">
                            {{ l.saveAndPreview }}
                        </v-btn>
                        <v-btn @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id">
                            {{ l.publish }}</v-btn>
                    </v-card-actions>
                </v-card>
            </v-tabs-window-item>
            <v-tabs-window-item value="preview">
                <v-card :title="l.preview" class="container my-3" v-if="object.asset">
                    <AssetPreview :object="object" ref="assetPreview" ></AssetPreview>
                    <v-card-actions>
                        <v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary">
                            {{ l.captureThumbnail }}
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-tabs-window-item>
        </v-tabs-window>
    </v-container>
</template>

<script>

export default {
    data() {
        return {
            panel: this.$route.query?.tab || 'edit',
            object: {},
            tagList: [],
            file: null,
            valid: false,
            rules: {
                required: v => v ? true : this.l.fieldRequired,
                requiredFile: v => (v?.size || this.id != 'add') ? true : this.l.fieldRequired
            },
            loading: false
        }
    },
    async mounted() {
        if (this.id && this.id != 'add') {
            this.object = (await this.$api.gameObject.load(this.id)).data;
        }
        this.tagList = (await this.$api.gameObject.getTags()).data;
    },
    computed: {
        id() {
            return this.$route.params?.id;
        },
        forRendering() {
            return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render || this.object?.asset?.name?.endsWith('ktx2')
        },
    },
    methods: {
        async save(params) {
            this.loading = true;
            try {
                let fd = new FormData();
                if (this.file) {
                    fd.append('file', this.file)
                }
                if (this.object.thumb){
                    fd.append('thumb', this.object.thumb)
                    delete this.object.thumb;
                }
                fd.append('object', JSON.stringify(this.object));
                let result = await this.$api.gameObject.save(fd);
                Object.assign(this.object, result.data.object);
                if (this.id == 'add' || params.preview) {
                    this.$router.replace({ params: { id: this.object.id }, query:{ tab:'preview' } });
                }
                this.debug(this.object)
                // await this.$nextTick();
                // this.panel = 'preview';
                // if (!params?.thumbOnly) await this.$refs.assetPreview.loadAsset();
            } catch (err) {
                console.error(err);
            }
            this.loading = false;
            // await this.$nextTick();
            // this.panel = 'preview';
        },
        
        async captureThumbnail() {
            this.object.thumb = await this.$refs.assetPreview.captureScreenshot();
            await this.save({ thumbOnly: true });
        },

        async publish() {

        }
    }
}
</script>

<route>
{
    meta: {
        layout: "console"
    }
}
</route>