<template>
    <div class="p-2">
        <h1 class="text-3xl text-center text-gray-900 font-bold mb-4">Quizz</h1>
        <div v-if="!selectedQuizz" class="flex justify-center flex-wrap my-4">
            <a v-for="(quizz, key) in quizzList"
               :key="key"
               class="btn mr-1 mb-1 cursor-pointer"
               @click="selectedQuizz = key">
               {{ key }}
            </a>
        </div>
        <div v-if="!levelQuizz" class="flex justify-center flex-wrap my-4">
            <a  v-for="(level, index) in levels"
                :key="index"
                class="btn mr-1 mb-1 cursor-pointer"
                @click="levelQuizz = level">
                Niveau {{ level }}
            </a>
        </div>
        <div v-if="selectedQuizz && levelQuizz">

            <div v-if="!responses" class="flex justify-center my-4">
                <span class="btn" @click="startQuizz">Commencer</span>
            </div>
            <div v-else-if="results" class="flex flex-col items-center">
                <div class="text-center text-2xl font-bold my-4">{{ selectedQuizz.name }}</div>
                <div class="text-center text-2xl font-bold my-4">{{ note }} / {{ responses.length }}</div>
                <span class="btn-primary mt-4" @click="newQuizz">Nouveau Quizz</span>
            </div>
            <div v-else class="flex flex-col flex-wrap">
                <div class="text-center my-4"><span class="text-2xl font-bold">{{ currentQuestion[0] }}</span></div>
                <div class="flex justify-center flex-wrap my-4">
                    <div v-for="(response, index) in currentResponses"
                         :key="index"
                         @click="responsed(currentQuestion, response)"
                         class="btn mx-1 mb-1">
                        {{ response }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import quizz from './quizz.json'

export default {
    name: 'Quizz',
    data: function () {
        return {
            quizzList: quizz,
            selectedQuizz: null,
            levels: [
                1, 2, 3
            ],
            levelQuizz: false,
            currentQuestion: null,
            currentResponses: null,
            responses: null,
            results: false,
        }
    },
    computed: {
        note() {
            let note = 0
            this.responses.forEach(response => {
                if(response[0][1] === response[1]) {
                    note = note + 1
                }
            })
            return note
        }
    },
    methods: {
        startQuizz: function () {
            this.responses = []
            this.selectedQuizz = this.quizzList[this.selectedQuizz]
            let newQuestion = this.newQuestion()
            this.currentQuestion = newQuestion.question
            this.currentResponses = newQuestion.responses
        },
        newQuizz: function() {
            this.selectedQuizz = null
            this.levelQuizz = false
            this.responses = null
            this.results = false
        },
        newQuestion: function() {
            let responses, question
            let random_boolean = (this.selectedQuizz.reversible) ? Math.random() >= 0.5 : false

            question = this.selectedQuizz.responses[Math.floor(Math.random() * this.selectedQuizz.responses.length)].slice()
            question = (random_boolean) ? question.reverse() : question
            responses = [question[1]]

            while (responses.length <= (this.levelQuizz * 2 - 1)) {
                let response = this.selectedQuizz.responses[Math.floor(Math.random() * this.selectedQuizz.responses.length)].slice()
                response = (random_boolean) ? response.reverse() : response
                if(!responses.includes(response[1])) {
                    responses.push(response[1])
                }
            }
            responses.sort((a, b) => a > b)

            return { question, responses }
        },
        responsed: function(question, response) {
            this.responses.push([question, response])

            if(this.responses.length > 9) {
                this.results = true
            }
            let newQuestion = this.newQuestion()
            this.currentQuestion = newQuestion.question
            this.currentResponses = newQuestion.responses
        }
    }
}
</script>
