// Stencil
import { h } from "@stencil/core";
// Tools
import { MediaTool } from '../../../tools/media-tool';
export class TrueFalseTestContent {
    constructor() {
        // Properties
        this.name = '';
        this.questions = [];
        this.seeResultsLabel = '';
        this.nextLabel = '';
        this.falseLabel = '';
        this.trueLabel = '';
        this.resultsLabel = '';
        this.congratsLabel = '';
        // States
        this.displayAnswer = false; // Whether to display the answer or not
        this.correctAnswer = false; // Is the answer correct or not
        this.isLastQuestion = false;
        this.questionCount = 0;
        this.correctAnswerCount = 0;
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    componentWillLoad() {
        this.questionCount = this.questions.length;
    }
    /**
     * Override
     */
    componentDidLoad() {
        // Delay the lock of the slides to get them fully loaded
        setTimeout(() => {
            const slides = this.getSlides();
            slides.update().then(() => {
                this.getSlides().lockSwipes(true);
            });
            // Register to slides changes to detect when the user went to
            // the next question
            slides.addEventListener("ionSlideDidChange", () => {
                slides.lockSwipes(true);
                this.isLastQuestion = (slides.getActiveIndex() === (this.questionCount - 1));
            });
        }, 500);
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * Evaluate whether the answer is correct or incorrect
     * Display the answer
     * @param question
     * @param value
     */
    answer(question, value) {
        // Fix an issue when the false value apppaears to be an undefined
        if (typeof question.answer === 'undefined')
            question.answer = false;
        this.displayAnswer = true;
        this.correctAnswer = question.answer === value;
        if (this.correctAnswer)
            ++this.correctAnswerCount;
        this.getSlides().lockSwipes(false);
    }
    /**
     * Go to the next question
     */
    nextQuestion() {
        this.displayAnswer = false;
        this.getSlides().slideNext();
    }
    /**
     * Close the Modal
    */
    closeModal() {
        this.closeModalClicked.emit();
    }
    ////////////////////////////////////////////////////////////////
    // Getters / Setters
    ////////////////////////////////////////////////////////////////
    /**
     * Get the Slides component from the DOM
     */
    getSlides() {
        return document.getElementById('ionSlides');
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", null,
            h("ion-slides", { id: 'ionSlides', pager: false },
                this.questions.map((question, index) => h("ion-slide", { class: 'question-slide' },
                    h("div", { class: 'image-container' + (this.displayAnswer ? ' overlay' : ''), style: { backgroundImage: 'url(' + MediaTool.imageL(question.backgroundImage) + ')' } },
                        h("p", { class: 'progression-text' },
                            index + 1,
                            "/",
                            this.questionCount),
                        this.displayAnswer
                            ? h("div", { class: 'answer-container', onClick: () => this.nextQuestion() }, this.correctAnswer
                                ?
                                    h("span", null,
                                        h("lottie-animation", { src: './assets/animations/right-answer.json', autoplay: true, loop: true, class: 'pin-animation' }))
                                : h("span", null,
                                    h("lottie-animation", { src: './assets/animations/wrong-answer.json', autoplay: true, loop: true, class: 'pin-animation' })))
                            : ''),
                    h("div", { class: 'question-container' }, this.displayAnswer
                        ? h("span", null,
                            h("p", { class: 'answer-text' }, question.explanation),
                            this.isLastQuestion
                                ? h("ion-button", { fill: 'outline', color: 'dark', onClick: () => this.nextQuestion() }, this.seeResultsLabel)
                                : h("ion-button", { class: 'next-button', fill: 'outline', color: 'dark', onClick: () => this.nextQuestion() }, this.nextLabel))
                        : h("span", null,
                            h("p", { class: 'question-text' }, question.question),
                            h("div", { class: 'button-container' },
                                h("ion-button", { fill: 'outline', color: 'danger', onClick: () => this.answer(question, false) }, this.falseLabel),
                                h("p", null, "/"),
                                h("ion-button", { fill: 'outline', color: 'success', onClick: () => this.answer(question, true) }, this.trueLabel)))))),
                h("ion-slide", { class: 'question-slide' },
                    h("div", { class: 'result-container overlay', style: { backgroundImage: 'url(' + MediaTool.imageL(this.questions[0].backgroundImage) + ')' }, onClick: () => this.closeModal() },
                        h("p", { class: 'result-text' }, this.resultsLabel),
                        h("div", { class: 'value-container ' + (this.correctAnswerCount / this.questionCount > 0.6 ? 'right-value-container' : 'wrong-value-container') },
                            this.correctAnswerCount,
                            "/",
                            this.questionCount),
                        this.correctAnswerCount / this.questionCount > 0.6 &&
                            h("span", { class: "answer-container" },
                                h("lottie-animation", { src: './assets/animations/confetti.json', autoplay: true, loop: true, speed: 0.1, class: 'congratulations-animation' }),
                                h("p", { class: 'message-text' }, this.congratsLabel)))))));
    }
    static get is() { return "true-false-test-content"; }
    static get originalStyleUrls() { return {
        "$": ["true-false-test-content.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["true-false-test-content.css"]
    }; }
    static get properties() { return {
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": false,
            "defaultValue": "''"
        },
        "questions": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Question[]",
                "resolved": "Question[]",
                "references": {
                    "Question": {
                        "location": "import",
                        "path": "./Question"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        },
        "seeResultsLabel": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "see-results-label",
            "reflect": false,
            "defaultValue": "''"
        },
        "nextLabel": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "next-label",
            "reflect": false,
            "defaultValue": "''"
        },
        "falseLabel": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "false-label",
            "reflect": false,
            "defaultValue": "''"
        },
        "trueLabel": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "true-label",
            "reflect": false,
            "defaultValue": "''"
        },
        "resultsLabel": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "results-label",
            "reflect": false,
            "defaultValue": "''"
        },
        "congratsLabel": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "congrats-label",
            "reflect": false,
            "defaultValue": "''"
        }
    }; }
    static get states() { return {
        "displayAnswer": {},
        "correctAnswer": {},
        "isLastQuestion": {},
        "questionCount": {},
        "correctAnswerCount": {}
    }; }
    static get events() { return [{
            "method": "closeModalClicked",
            "name": "closeModalClicked",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            }
        }]; }
}
