"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 __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 TokenTutorialStyledComponents_1 = require("./TokenTutorialStyledComponents");
var ClockIcon_1 = require("../icons/ClockIcon");
var TokenTutorialTextComponents_1 = require("./TokenTutorialTextComponents");
var TokenTutorialQuiz_1 = require("./TokenTutorialQuiz");
var TutorialContent_1 = require("./TutorialContent");
var DisclosureArrowIcon_1 = require("../icons/DisclosureArrowIcon");
var utils_1 = require("@joincivil/utils");
var TokenTutorialLanding = /** @class */ (function (_super) {
    __extends(TokenTutorialLanding, _super);
    function TokenTutorialLanding(props) {
        var _this = _super.call(this, props) || this;
        _this.saveQuizState = function (topic, lastSlideIdx, isComplete) {
            var _a, _b;
            var quizPayload = _this.props.quizPayload;
            if (isComplete) {
                // This bad boy loops through all the current topics and checks to see if any topic has not been completed. If complete set the quizStatus.
                var allQuizzesComplete_1 = true;
                TutorialContent_1.TutorialContent.forEach(function (t) {
                    if (!allQuizzesComplete_1) {
                        return;
                    }
                    if (t.quizId === topic) {
                        allQuizzesComplete_1 = isComplete;
                        return;
                    }
                    allQuizzesComplete_1 = quizPayload[t.quizId] && quizPayload[t.quizId].isComplete;
                });
                utils_1.updateQuizPayload((_a = {}, _a[topic] = { isComplete: isComplete, lastSlideIdx: lastSlideIdx }, _a), allQuizzesComplete_1 ? "complete" : undefined);
            }
            else {
                utils_1.updateQuizPayload((_b = {}, _b[topic] = { isComplete: isComplete, lastSlideIdx: lastSlideIdx }, _b));
            }
        };
        // Take the quiz straight thru without reading the tutorial
        _this.skipTutorial = function () {
            _this.setState({ activeTutorialIdx: 0, tutorialActive: true, skipTutorial: true, activeSection: "quiz" });
        };
        _this.openTutorial = function (topicNumber, lastSlideNumber) {
            _this.setState({ activeTutorialIdx: topicNumber, tutorialActive: true, quizSlide: lastSlideNumber });
        };
        _this.state = {
            activeTutorialIdx: 0,
            tutorialActive: false,
            skipTutorial: false,
            activeSection: "intro",
            quizSlide: 0,
        };
        return _this;
    }
    TokenTutorialLanding.prototype.render = function () {
        var _this = this;
        var activeTopic = 0;
        if (this.state.tutorialActive) {
            return (React.createElement(TokenTutorialQuiz_1.TokenTutorialQuiz, { topicIdx: this.state.activeTutorialIdx, totalTopics: TutorialContent_1.TutorialContent.length - 1, skipTutorial: this.state.skipTutorial, activeSection: this.state.activeSection, handleClose: this.props.handleClose, handleSaveQuizState: this.saveQuizState, quizSlide: this.state.quizSlide }));
        }
        return (React.createElement(TokenTutorialStyledComponents_1.TutorialLandingContainer, null,
            React.createElement(TokenTutorialStyledComponents_1.TutorialIntro, null,
                React.createElement(TokenTutorialTextComponents_1.TutorialIntroText, null),
                React.createElement(TokenTutorialStyledComponents_1.TutorialTime, null,
                    React.createElement(ClockIcon_1.ClockIcon, null),
                    React.createElement(TokenTutorialTextComponents_1.TutorialTimeText, null))),
            React.createElement(TokenTutorialStyledComponents_1.TutorialSkipSection, null,
                React.createElement(TokenTutorialTextComponents_1.TutorialSkipText, null),
                React.createElement(TokenTutorialStyledComponents_1.TakeQuizBtn, { onClick: function () { return _this.skipTutorial(); } }, "Take the quiz")),
            TutorialContent_1.TutorialContent.map(function (topic, idx) {
                // lastSlideIdx is the index number, lastSlideNumber is the visible question number
                var _a = _this.getTopicStatus(_this.props.quizPayload, topic), lastSlideIdx = _a.lastSlideIdx, isComplete = _a.isComplete, isStarted = _a.isStarted;
                var lastSlideNumber = lastSlideIdx + 1;
                var nextQuestionNumber = isStarted ? lastSlideNumber : 0;
                if (isComplete) {
                    activeTopic++;
                }
                var topicDisabled = activeTopic !== idx;
                return (React.createElement(TokenTutorialStyledComponents_1.TutorialTopic, { key: idx },
                    React.createElement(TokenTutorialStyledComponents_1.LaunchTopic, { onClick: function () { return _this.openTutorial(idx, nextQuestionNumber); }, disabled: topicDisabled },
                        React.createElement(TokenTutorialStyledComponents_1.LaunchTopicTop, null,
                            React.createElement("div", null,
                                topic.icon,
                                React.createElement("h3", null, topic.name),
                                React.createElement("p", null, topic.description)),
                            React.createElement(DisclosureArrowIcon_1.DisclosureArrowIcon, null)),
                        React.createElement(TokenTutorialStyledComponents_1.TopicProgress, null,
                            React.createElement(TokenTutorialTextComponents_1.TutorialProgressText, { questions: topic.questions.length - nextQuestionNumber }),
                            React.createElement(TokenTutorialStyledComponents_1.TutorialLandingProgressBars, null,
                                topic.questions.map(function (question, questionIdx) {
                                    if (isStarted && questionIdx <= lastSlideIdx) {
                                        return React.createElement(TokenTutorialStyledComponents_1.TutorialLandingProgressBar, { key: questionIdx, completed: true });
                                    }
                                    return React.createElement(TokenTutorialStyledComponents_1.TutorialLandingProgressBar, { key: questionIdx });
                                }),
                                React.createElement("b", null,
                                    nextQuestionNumber,
                                    "/",
                                    topic.questions.length))))));
            })));
    };
    TokenTutorialLanding.prototype.getTopicStatus = function (quizPayload, topic) {
        if (!quizPayload || !quizPayload[topic.quizId]) {
            return { isComplete: false, lastSlideIdx: 0, isStarted: false };
        }
        var isComplete = quizPayload[topic.quizId].isComplete || false;
        var lastSlideIdx = quizPayload[topic.quizId].lastSlideIdx || 0;
        return { isComplete: isComplete, lastSlideIdx: lastSlideIdx, isStarted: true };
    };
    return TokenTutorialLanding;
}(React.Component));
exports.TokenTutorialLanding = TokenTutorialLanding;
//# sourceMappingURL=TokenTutorialLanding.js.map