"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var TutorialStyledComponents_1 = require("./TutorialStyledComponents");
var TutorialTextComponents_1 = require("./TutorialTextComponents");
var TutorialFooter_1 = require("./TutorialFooter");
var TutorialProgress_1 = require("./TutorialProgress");
var TutorialRadio_1 = require("./TutorialRadio");
var input_1 = require("../input");
var HollowGreenCheck_1 = require("../icons/HollowGreenCheck");
var HollowRedNoGood_1 = require("../icons/HollowRedNoGood");
var TutorialQuestion = /** @class */ (function (_super) {
    __extends(TutorialQuestion, _super);
    function TutorialQuestion(props) {
        var _this = _super.call(this, props) || this;
        _this.enableCheckAnswerBtn = function (name, value) {
            _this.setState({ checkAnswerDisabled: false, usersAnswerValue: value });
        };
        _this.checkAnswer = function () {
            if (_this.state.usersAnswerValue === _this.props.answer) {
                _this.setState({ usersAnswerResult: "correct" });
            }
            else {
                _this.setState({ usersAnswerResult: "incorrect", checkAnswerDisabled: true });
            }
        };
        _this.resetQuestion = function (event) {
            var radioButtons = Array.from(document.querySelectorAll("input[type=radio]"));
            radioButtons.forEach(function (radio) {
                var radioInput = radio;
                radioInput.checked = false;
            });
            _this.props.onClickNext(event);
            _this.setState({ resetQuestion: true });
        };
        _this.state = {
            checkAnswerDisabled: true,
            usersAnswerValue: "",
            usersAnswerResult: "",
            resetQuestion: false,
        };
        return _this;
    }
    TutorialQuestion.getDerivedStateFromProps = function (props, state) {
        if (state.resetQuestion) {
            return {
                checkAnswerDisabled: true,
                usersAnswerValue: "",
                usersAnswerResult: "",
                resetQuestion: false,
            };
        }
        return __assign({}, state);
    };
    TutorialQuestion.prototype.render = function () {
        var _this = this;
        return (React.createElement(React.Fragment, null,
            React.createElement(TutorialProgress_1.TutorialProgress, { activeSlide: this.props.activeSlide, totalSlides: this.props.totalSlides, showSlideCount: true }),
            React.createElement(TutorialStyledComponents_1.TutorialContentWrap, null,
                React.createElement(TutorialStyledComponents_1.TutorialQuizName, null,
                    "Quiz: ",
                    this.props.quizName),
                React.createElement(TutorialStyledComponents_1.TutorialQuizQuestion, null,
                    React.createElement("span", null,
                        this.props.activeSlide,
                        "."),
                    this.props.question),
                React.createElement("div", null,
                    React.createElement(input_1.RadioInput, { name: this.props.quizId + "-" + this.props.activeSlide, label: "", onChange: this.enableCheckAnswerBtn }, this.props.options.map(function (option, idx) { return (React.createElement(TutorialRadio_1.TutorialRadio, { value: option.text, key: idx }, option.text)); })))),
            React.createElement(TutorialFooter_1.TutorialFooter, { questionResult: this.state.usersAnswerResult }, this.state.usersAnswerResult === "correct" ? (React.createElement(React.Fragment, null,
                React.createElement(TutorialStyledComponents_1.TutorialFooterLeft, null,
                    React.createElement(HollowGreenCheck_1.HollowGreenCheck, { width: 50, height: 50 }),
                    React.createElement("h3", null,
                        React.createElement(TutorialTextComponents_1.CorrectText, null))),
                React.createElement(TutorialStyledComponents_1.TutorialBtn, { onClick: this.resetQuestion }, "Continue"))) : this.state.usersAnswerResult === "incorrect" ? (React.createElement(React.Fragment, null,
                React.createElement(TutorialStyledComponents_1.TutorialFooterLeft, null,
                    React.createElement(HollowRedNoGood_1.HollowRedNoGood, { width: 50, height: 50 }),
                    React.createElement("div", null,
                        React.createElement("h3", null,
                            React.createElement(TutorialTextComponents_1.IncorrectText, null)),
                        React.createElement("p", null, this.props.answer),
                        React.createElement("span", null,
                            React.createElement(TutorialTextComponents_1.SelectCorrectText, null)))),
                React.createElement(TutorialStyledComponents_1.TutorialBtn, { disabled: this.state.checkAnswerDisabled, onClick: function () { return _this.checkAnswer(); } }, "Check"))) : (React.createElement(React.Fragment, null,
                React.createElement(TutorialStyledComponents_1.TutorialInvertedBtn, { onClick: this.props.onClickPrev }, "Back to Tutorial"),
                React.createElement(TutorialStyledComponents_1.TutorialBtn, { disabled: this.state.checkAnswerDisabled, onClick: function () { return _this.checkAnswer(); } }, "Check"))))));
    };
    return TutorialQuestion;
}(React.Component));
exports.TutorialQuestion = TutorialQuestion;
//# sourceMappingURL=TutorialQuestion.js.map