<template>
    <v-dialog max-width="1400" scrollable>
        <template v-slot:activator="{ props: activatorProps }">
            <v-btn v-bind="activatorProps">Manage Questions</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="`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="Correct answer" 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="Wrong answer #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="Wrong answer #2" v-if="n.a[1]" icon-color="error" prepend-icon="mdi-close"></v-text-field>
                                <v-text-field density="compact" hide-details label="Wrong answer hint" 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>
                    <v-btn color="success" @click="addQuestion" block>Add question</v-btn>
                    <v-btn color="primary" @click="isActive.value = false" >Close</v-btn>
                </v-card-actions>
            </v-card>
        </template>
    </v-dialog>
    <v-checkbox v-model="modelValue.shuffle" hide-details label="Shuffle questions"></v-checkbox>
    <v-number-input density="compact" label="Correct answer points" v-model="modelValue.questionPoints"></v-number-input>
    <v-number-input density="compact" label="Wrong answer penalty points" v-model="modelValue.questionPenalty"></v-number-input>
</template>

<script>
export default {
    props:['modelValue'],
    mounted(){
        this.modelValue.questions ??= [];
        this.modelValue.questionPoints ??= 10;
        this.modelValue.questionPenalty ??= 0;
        this.modelValue.exclude = true;
    },
    methods:{
        addQuestion(){
            this.modelValue.questions.push({
                q:'', a:['', ''], h:''
            })
        },
        deleteQuestion(idx){
            this.modelValue.questions.splice(idx, 1);
        }
    }
}
</script>