<template>
    <v-card :title="$l.createGameObject" class="container my-3">
        <v-form class="pa-4" v-model="valid">
            <v-text-field :label="$l.name" v-model="name" :rules="[rules.required]"></v-text-field>
            <v-select :label="$l.objectType" v-model="type" :items="objectTypes" :rules="[rules.required]">
            </v-select>
            <v-file-input :label="$l.objectFile" v-model="file" :rules="[rules.requiredFile]"></v-file-input>
        </v-form>
        <v-card-actions>
            <v-btn @click="saveAndPreview" :loading="loading" prepend-icon="mdi-content-save" color="primary" :disabled="!valid">
                {{ $l.saveAndPreview }}
            </v-btn>
            <v-btn @click="captureThumbnail" prepend-icon="mdi-camera" color="secondary">{{$l.captureThumbnail}}</v-btn>
            <v-btn @click="publish" prepend-icon="mdi-publish" color="success">{{$l.publish}}</v-btn>
        </v-card-actions>
    </v-card>

    <v-card title="Preview" class="container my-3">
        <div ref="target"></div>
    </v-card>
</template>

<script>
import { GameEngine } from '@/gameEngine';

const gameEngine = new GameEngine();

export default {
    data(){
        return {
            name: null,
            type: null,
            file: null,
            valid: false, 
            rules:{
                required: v=> v ? true : this.$l.fieldRequired,
                requiredFile: v=> v?.length ? true : this.$l.fieldRequired
            },
            objectTypes: ['panorama2d', 'environment3d', 'object3d', 'object2d', 'player3d', 'audio'].map(e=>({
                title: this.$l[e],
                value: e
            })),
            loading:false
        }
    },
    mounted() {
        this.$refs.target.appendChild(gameEngine.renderer.domElement);
    },
    methods: {
        async saveAndPreview() {
            this.loading = true;
            let fd = new FormData();
            fd.append('file', this.file);
            fd.append('name', this.name);
            fd.append('type', this.type);
            let result = await this.$api.gameObject.save(fd)
            this.loading = false
        },
        captureThumbnail() {

        },
        async publish(){

        }
    }
}
</script>