<template>
    <v-dialog max-width="1400" scrollable>
        <template v-slot:activator="{ props: activatorProps }">
            <v-btn v-bind="activatorProps">{{ l.manageQuestions }}</v-btn>
        </template>

        <template v-slot:default="{ isActive }">
            <v-card>
                <v-card-text>
                    <div class="d-flex flex-wrap w-100">
                        <v-card v-for="(n, ni) in modelValue.questions" class="v-col-6" variant="outlined" border="0">
                            <v-card-item>
                                <v-text-field density="compact" hide-details :label="`${l.question} #${ni+1}`" v-model="n.q" class="py-2">
                                    <template v-slot:append>
                                        <v-btn variant="plain" color="error" @click="deleteQuestion(ni)">
                                            <v-icon icon="mdi-delete-forever"></v-icon>
                                        </v-btn>
                                    </template>
                                </v-text-field>
                                <v-text-field  hide-details density="compact" v-model="n.a[0]" class="pb-2"
                                    :label="l.correctAnswer" icon-color="success" prepend-icon="mdi-check"></v-text-field>
                                <v-text-field hide-details density="compact" v-model="n.a[1]" class="pb-2"
                                    :label="`${l.wrongAnswer} #1`" icon-color="error" prepend-icon="mdi-close"></v-text-field>
                                <v-text-field hide-details density="compact" v-model="n.a[2]" class="pb-2"
                                    :label="`${l.wrongAnswer} #2`" v-if="n.a[1]" icon-color="error" prepend-icon="mdi-close"></v-text-field>
                                <v-text-field density="compact" hide-details :label="l.wrongAnswerHint" v-model="n.h" class="pb-2"></v-text-field>
                            </v-card-item>
                            <v-divider></v-divider>
                        </v-card>
                    </div>
                </v-card-text>
                <v-card-actions class="px-5">
                    <v-btn color="success" @click="addQuestion" >{{ l.addQuestion }}</v-btn>
                    <v-btn color="info" size="small" icon="mdi-microsoft-excel" @click="pasteFromExcel" v-tooltip="'Paste from excel (tab separated, question, correct answer, wrong answer 1, wrong answer 2, hint)'" ></v-btn>
                    <v-btn color="info" size="small" icon="mdi-table-arrow-right" @click="copyToExcel" v-tooltip="'Copy to excel (tab separated, question, correct answer, wrong answer 1, wrong answer 2, hint)'" ></v-btn>
                    <v-divider class="mx-2" ></v-divider>
                    <v-btn color="primary" @click="isActive.value = false" >{{ l.close }}</v-btn>
                </v-card-actions>
            </v-card>
        </template>
    </v-dialog>
    <v-checkbox v-model="modelValue.shuffle" hide-details :label="l.shuffleQuestions"></v-checkbox>
    <v-number-input density="compact" v-if="modelValue.shuffle" :label="`Брой въпроси в един тест`" v-model="modelValue.questionsCount"></v-number-input>
    <v-number-input density="compact" :label="l.correctAnswerPoints" v-model="modelValue.questionPoints"></v-number-input>
    <v-number-input density="compact" :label="l.wrongAnswerPenalty" v-model="modelValue.questionPenalty"></v-number-input>
    <v-select v-model="modelValue.style" :items="styles" density="compact" :label="l.visualStyle"></v-select>
    <SceneSwitcher v-model="mv"></SceneSwitcher>
</template>

<script>
import SceneSwitcher from '../SceneSwitcher/SceneSwitcher.vue';

export default {
    props:['modelValue'],
    data(){
        return {
            styles:[
                { title: 'Lake reeds / тръстики в езерото', value: 'quiz.gltf' },
                { title: 'Grass and pavement pathway / трева и паваж', value: 'quiz-s2.gltf' },
                { title: 'Medieval Fortress / средновековна крепост', value: 'quiz-fortress.gltf' },
                { title: 'Air Islands / острови във въздуха', value: 'quiz-on-air.gltf' },
                { title: 'Islands / острови', value: 'quiz-islands.gltf' },
                { title: 'Red lake / червено езеро', value: 'quiz-red-lakes.gltf'}
            ]
        }
    },
    mounted(){
        this.modelValue.questions ??= [];
        this.modelValue.questionPoints ??= 10;
        this.modelValue.questionPenalty ??= 0;
        this.modelValue.exclude = true;
    },
    computed:{
        mv(){
            return this.modelValue;
        }
    },
    methods:{
        addQuestion(){
            this.modelValue.questions.push({
                q:'', a:['', ''], h:''
            })
        },
        deleteQuestion(idx){
            this.modelValue.questions.splice(idx, 1);
        },
        async pasteFromExcel(){
            const text = await navigator.clipboard.readText();
            if(text){
                let rows = text.split('\n');
                this.modelValue.questions.splice(0, this.modelValue.questions.length);
                rows.forEach(r=>{
                    let cols = r.split('\t');
                    if(cols.length >= 4){
                        this.modelValue.questions.push({
                            q: cols[0],
                            a: [cols[1], cols[2], cols[3]],
                            h: cols[4] || ''
                        })
                    }
                })
            }
        },
        copyToExcel(){
            let text = this.modelValue.questions.map(q=> `${q.q}\t${q.a[0]}\t${q.a[1]}\t${q.a[2] || ''}\t${q.h || ''}`).join('\n');
            navigator.clipboard.writeText(text);
            this.toast('Copied to clipboard, you can paste it in Excel or similar spreadsheet software', 'success');
        }
    }
}
</script>