<template>
    <v-container max-width="1400">
        <v-tabs v-model="panel" class="mb-2">
            <v-tab value="game">
                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGame : l.editGame }}
            </v-tab>
            <v-tab value="gameDesigner" v-if="this.id != 'add'">
                <v-icon icon="mdi-movie-open-outline"></v-icon> {{ l.gameDesigner }}
            </v-tab>
        </v-tabs>
        <v-tabs-window v-model="panel">
            <v-tabs-window-item value="game">
                <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-text-field :label="l.group" v-model="object.group"></v-text-field>
                    <v-number-input density="compact" :label="l.order" v-model="object.order"></v-number-input>
                    <v-select density="compact" :label="l.completionElements" v-model="object.activationTriggers"
                        :items="games.filter(v=>v.id != id).map(v=>({title: v.name, value: v.id}))" multiple >
                    </v-select>
                    <v-select :label="l.scenario" :items="scenarios" :disabled="this.id != 'add'" v-model="object.scenario" item-title="name" item-value="id"></v-select>
                </v-form>
            </v-tabs-window-item>
            <v-tabs-window-item value="gameDesigner">
                <GameDesigner v-model="object" ref="gameDesigner" ></GameDesigner>
            </v-tabs-window-item>
        </v-tabs-window>
        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn>
    </v-container>
</template>

<script>

export default {
    data() {
        return {
            object: {},
            valid: false,
            rules: {
                required: v => v ? true : this.l.fieldRequired,
                requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
            },
            loading: false,
            panel: [],
            scenarios: [],
            games: []
        }
    },
    async mounted(){
        if (this.id && this.id != 'add') {
            this.object = (await this.$api.game.load(this.id)).data;
        }
        this.scenarios = (await this.$api.scenario.search()).data.data;
        this.games = (await this.$api.game.search()).data.data;
    },
    watch:{
        'object.scenario'(v){
            if (v){
                this.object.thumb = this.scenarios?.find(s=>s.id == v)?.sceneThumb?.[0];
            }
        }
    },
    computed: {
        id() {
            return this.$route.params?.id;
        }
    },
    methods:{
        async save(params) {
            this.loading = true;
            try {
                //this.debug('saving', this.object)
                let result = await this.$api.game.save(this.object);
                this.object.id = result.data.object.id;
                if (this.id == 'add') {
                    this.$router.replace({ params: { id: this.object.id } });
                }
            } catch (err) {
                console.error(err);
            }
            this.loading = false
        },
    }
}
</script>

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