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

            <div v-if="!responses" class="flex justify-center mt-8">
                <span class="btn cursor-pointer" @click="startQuizz">Commencer</span>
            </div>
            <div v-else>
                Start
            </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, 4, 5
            ],
            levelQuizz: false,
            currentQuestion: null,
            currentResponses: null,
            responses: null,
        }
    },
    methods: {
        startQuizz: function () {
            console.log('start')
            this.responses = []
            this.selectedQuizz = this.quizzList[this.selectedQuizz]
            this.currentQuestion = this.selectedQuizz[Math.floor(Math.random() * this.selectedQuizz.length)]
            this.currentResponses = [this.currentQuestion[1]]

            while (this.currentResponses.length <= (this.levelQuizz * 2 - 1)) {
                let response = this.selectedQuizz[Math.floor(Math.random() * this.selectedQuizz.length)]
                console.log(response)
                if(!this.currentResponses.includes(response[1])) {
                    this.currentResponses.push(response[1])
                }
            }

            console.log(this.currentQuestion, this.currentResponses)


        }
    }
}
</script>
