import { Component, OnInit } from '@angular/core';
import * as faker from 'faker';

@Component({
    selector: 'app-quiz',
    templateUrl: './quiz.page.html',
    styleUrls: ['./quiz.page.scss'],
})
export class QuizPage implements OnInit {
    secondsPerQuestion: number;
    selectedQuestion: number = 0;

    questionType: 'MCQ' | 'CARD';

    questions: Array<{
        type: 'MCQ' | 'CARD',
        question: any,
        choices?: Array<{
            value: string,
            text: string,            
        }>,
        correctAnswer?: string,
        secondsAllotted: number
    }>;
    showReport: boolean = true;

    constructor() { }

    ngOnInit() {
        this.startQuiz();
    }


    startQuiz() {
        this.selectedQuestion = 0;
        this.showReport = false;

        let timer = setInterval(() => {
            if (this.secondsPerQuestion === 0) {
                clearInterval(timer);
            } else {
                this.secondsPerQuestion -= 1;
            }
        }, 1000);        

        let cardQuestions = [];

        for (let i = 0; i < 4; i += 1) {
            cardQuestions.push({
                text: faker.lorem.sentence(),
                image: faker.image.abstract()
            });
        }

        this.questions = [{
            type: 'MCQ',
            question: faker.lorem.sentence(),
            choices: [{
                value: 'A',
                text: 'Choice 1'
            }, {
                value: 'B',
                text: 'Choice 2'
            }, {
                value: 'C',
                text: 'Choice 3'
            }],
            correctAnswer: 'A',
            secondsAllotted: 50
        }, {
            type: 'CARD',
            question: cardQuestions,
            secondsAllotted: 20
        }];

        this.secondsPerQuestion = this.questions[this.selectedQuestion].secondsAllotted;
        this.questionType = this.questions[this.selectedQuestion].type;
    }


    nextQuestion() {
        if (this.selectedQuestion < this.questions.length - 1) {
            this.selectedQuestion += 1;
            this.secondsPerQuestion = this.questions[this.selectedQuestion].secondsAllotted;
            this.questionType = this.questions[this.selectedQuestion].type;
        } else {
            this.showReport = true;
        }
    }

    getCardEvent(data) {
        if (data) {
            if (data.end) {
                this.nextQuestion();
            }
        }
    }

}