import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { NgxSiemaOptions, NgxSiemaService } from 'ngx-siema';

@Component({
	selector: 'app-quiz',
	templateUrl: './quiz.component.html',
	styleUrls: ['./quiz.component.scss']
})
export class QuizComponent implements OnInit {
    options: NgxSiemaOptions = {
		selector: '.siema',
		duration: 300,
		easing: 'ease-out',
		perPage: 1,
		startIndex: 0,
		draggable: false,
		threshold: 20,
		loop: false,
		onInit: () => {
			// runs immediately after first initialization
		},
		onChange: () => {
			// runs after slide change
		},
	};

    quizSegment: string = 'START_PAGE';
    showQuestionList: boolean = false;

    selectedQuestion: any;

    questionList = [{
        id: 1,
        question: 'Which sentence is corrent? "1. Ramu went to School \n 2. School went Ramu"',
        userAnswer: 0,
        correctAnswer: 1,
        options: [{
            id: 1,
            text: '1 is correct',
        }, {
            id: 2,
            text: '2 is correct',
        }, {
            id: 3,
            text: 'Both are correct',
        }, {
            id: 4,
            text: 'Both are wrong',
        }]
    }, {
        id: 2,
        question: 'How much is 16x16 ?',
        userAnswer: 0,
        correctAnswer: 4,
        options: [{
            id: 1,
            text: '30000',
        }, {
            id: 2,
            text: '540',
        }, {
            id: 3,
            text: '156',
        }, {
            id: 4,
            text: '256',
        }]
    }, {
        id: 3,
        question: 'Who is Jackie Chan ?',
        userAnswer: 0,
        correctAnswer: 2,
        options: [{
            id: 1,
            text: 'Dancer',
        }, {
            id: 2,
            text: 'Actor',
        }, {
            id: 3,
            text: 'Singer',
        }, {
            id: 4,
            text: 'Gambler',
        }]
    }, {
        id: 4,
        question: 'Who is Newton ?',
        userAnswer: 0,
        correctAnswer: 3,
        options: [{
            id: 1,
            text: 'Dancer',
        }, {
            id: 2,
            text: 'Actor',
        }, {
            id: 3,
            text: 'Scientist',
        }, {
            id: 4,
            text: 'Gambler',
        }]
    }];


	constructor(
        private location: Location,
        private ngxSiemaService: NgxSiemaService
    ) { }

	ngOnInit(): void {
        this.selectedQuestion = this.questionList[0];
	}

    next() {
        if (this.selectedQuestion.id === this.questionList[this.questionList.length - 1].id) {
            this.quizSegment = 'END_PAGE';
        } else {
            this.ngxSiemaService.next(1);
            this.ngxSiemaService.currentSlide().subscribe((index) => {
                this.selectedQuestion = this.questionList[index.currentSlide];
            }).unsubscribe();
        }
    }

    goToSlide(index: number) {
        this.ngxSiemaService.goTo(index);
        this.selectedQuestion = this.questionList[index];
        this.showQuestionList = false;
    }

    prev() {
        this.ngxSiemaService.prev(1);
        this.ngxSiemaService.currentSlide().subscribe((index) => {
            this.selectedQuestion = this.questionList[index.currentSlide];
        }).unsubscribe();
    }

    back() {
        this.location.back();
    }


    isAnswerWrong(correctAnswer: number, userAnswer: number) {
        if (correctAnswer !== userAnswer) {
            console.log("Called");
            window.navigator.vibrate(1000);
        }
    }

    getCorrectAnswersCount() {
        return this.questionList.filter((question) => {
            return question.correctAnswer === question.userAnswer;
        }).length;
    }

    getWrongAnswersCount() {
        return this.questionList.filter((question) => {
            return question.correctAnswer !== question.userAnswer && question.userAnswer !== 0;
        }).length;
    }

    getUnAttendedAnswersCount() {
        return this.questionList.filter((question) => {
            return question.userAnswer === 0;
        }).length;
    }

}