import { __decorate, __values } from "tslib";
import { Component, Input } from "@angular/core";
import { ItemService } from "../item-service/item-service.service";
import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from "@angular/forms";
var TrueFalseComponent = /** @class */ (function () {
    function TrueFalseComponent(itemService, formBuilder) {
        this.itemService = itemService;
        this.formBuilder = formBuilder;
        // Declare the variables
        this.userAnswer = [];
        this.correctAns = [];
        this.assetData = [];
        this.radioValue = {};
        this.questionDetails1 = [];
        this.assetPosition = [];
        // tslint:disable-next-line:max-line-length
        this.alphabetsIndex = [
            "A",
            "B",
            "C",
            "D",
            "E",
            "F",
            "G",
            "H",
            "I",
            "J",
            "K",
            "L",
            "M",
            "N",
            "O",
            "P",
            "Q",
            "R",
            "S",
            "T",
            "U",
            "V",
            "W",
            "X",
            "Y",
            "Z"
        ];
        this.incorrectRationale = [];
        this.imagePath = [];
    }
    Object.defineProperty(TrueFalseComponent.prototype, "questionDetails", {
        get: function () {
            return this.questionDetails;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TrueFalseComponent.prototype, "questionCurrentData", {
        set: function (value) {
            if (value) {
                this.questionDetails1 = value;
                this.createQuestion();
            }
            else {
                this.questionDetails1 = [];
                this.createQuestion();
            }
        },
        enumerable: true,
        configurable: true
    });
    /* Init */
    TrueFalseComponent.prototype.ngOnInit = function () { };
    /* Do Check */
    TrueFalseComponent.prototype.ngDoCheck = function () {
        if (this.isClearAnswer === true) {
            this.clearUserInputs();
            this.itemService.userAnswerMethod([]);
            this.itemService.clearAnswerMethodFalse(false);
            this.itemService.hideAnswer(false);
        }
        if (this.isShowHide === true) {
            this.message = true;
        }
        else if (this.isShowHide === false) {
            this.message = false;
        }
    };
    TrueFalseComponent.prototype.ngOnChanges = function (changes) { };
    /*function to get correct answer */
    TrueFalseComponent.prototype.correctAnswer = function () {
        var e_1, _a;
        try {
            for (var _b = __values(this.questionDetails1.choiceInteraction.simpleChoices), _c = _b.next(); !_c.done; _c = _b.next()) {
                var i = _c.value;
                if (i.correct === true) {
                    this.correctAns = i;
                }
            }
        }
        catch (e_1_1) { e_1 = { error: e_1_1 }; }
        finally {
            try {
                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
            }
            finally { if (e_1) throw e_1.error; }
        }
        this.incorrectRationale = this.questionDetails1.choiceInteraction.simpleChoices.filter(function (item) { return item.rationale !== null && item.correct !== true; });
    };
    /* function to get selected answer */
    TrueFalseComponent.prototype.selectAnswer = function (option) {
        this.radioValue = option;
        this.userAnswer = this.radioValue["choiceId"];
        // Call the service to store the user answer
        if (this.userAnswer !== undefined && this.userAnswer !== null) {
            var answerObj = [this.userAnswer];
            this.itemService.userAnswerMethod(answerObj);
            this.itemService.validateAnswerValueMethod(this.isUserAnswersCorrect());
        }
        else {
            this.itemService.userAnswerMethod([]);
            this.itemService.validateAnswerValueMethod(false);
        }
    };
    /* Check wheather the user selected answer is correct */
    TrueFalseComponent.prototype.isUserAnswersCorrect = function () {
        if (this.userAnswer === this.correctAns.choiceId) {
            return true;
        }
        else {
            return false;
        }
    };
    /* function to clear user inputs */
    TrueFalseComponent.prototype.clearUserInputs = function () {
        this.userAnswer = [];
        this.form.reset();
    };
    /* Get Choice class name */
    TrueFalseComponent.prototype.getChoiceClassName = function (choiceDetails) {
        if (choiceDetails.correct) {
            return "wk-icon-checkmark green-checkmark";
        }
        else if (!choiceDetails.correct &&
            this.userAnswer === choiceDetails.choiceId) {
            return "wk-icon-close wrong-checkmark";
        }
        else {
            return "wk-icon-checkmark disabled-checkmark";
        }
    };
    /* Check the value has been changed */
    TrueFalseComponent.prototype.valueChanged = function () {
        if (this.userAnswer !== undefined && this.userAnswer !== null) {
            var answerObj = this.userAnswer.length !== 0 ? [this.userAnswer] : this.userAnswer;
            this.itemService.userAnswerMethod(answerObj);
            this.itemService.validateAnswerValueMethod(this.isUserAnswersCorrect());
        }
        else {
            this.itemService.userAnswerMethod([]);
            this.itemService.validateAnswerValueMethod(false);
        }
    };
    /* Check the asset empty */
    TrueFalseComponent.prototype.checkEmptyAsset = function () {
        return Object.keys(this.assetData).length === 0;
    };
    TrueFalseComponent.prototype.createQuestion = function () {
        var e_2, _a;
        var _this = this;
        this.radioValue = {};
        this.userAnswer = [];
        this.correctAns = [];
        this.incorrectRationale = [];
        this.itemService.userAnswerMethod([]);
        this.itemService.validateAnswerValueMethod(false);
        this.itemService.userAnswerState.subscribe(function (answer) { return (_this.userAnswerService = answer); });
        this.assetData = this.questionDetails1.assets;
        if (this.assetData.length !== 0) {
            this.assetPosition = this.questionDetails1.assets[0]["assetsPosition"];
        }
        this.correctAnswer();
        if (this.questionDetails1.userAttemptDetails.userAnswer !== undefined &&
            Object.keys(this.questionDetails1.userAttemptDetails.userAnswer)
                .length !== 0) {
            try {
                for (var _b = __values(this.questionDetails1.choiceInteraction.simpleChoices), _c = _b.next(); !_c.done; _c = _b.next()) {
                    var j = _c.value;
                    if (this.questionDetails1.userAttemptDetails.userAnswer[0] ===
                        j["choiceId"]) {
                        this.radioValue = j;
                        this.userAnswer = this.radioValue["choiceId"];
                    }
                }
            }
            catch (e_2_1) { e_2 = { error: e_2_1 }; }
            finally {
                try {
                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                }
                finally { if (e_2) throw e_2.error; }
            }
        }
        this.form = this.formBuilder.group({
            choices: [this.radioValue["choiceId"]]
        });
        this.valueChanged();
    };
    TrueFalseComponent.ctorParameters = function () { return [
        { type: ItemService },
        { type: FormBuilder }
    ]; };
    __decorate([
        Input("questionDetails")
    ], TrueFalseComponent.prototype, "questionCurrentData", null);
    __decorate([
        Input()
    ], TrueFalseComponent.prototype, "examEngineType", void 0);
    __decorate([
        Input()
    ], TrueFalseComponent.prototype, "canShowMetadata", void 0);
    __decorate([
        Input()
    ], TrueFalseComponent.prototype, "isClearAnswer", void 0);
    __decorate([
        Input()
    ], TrueFalseComponent.prototype, "isShowHide", void 0);
    __decorate([
        Input()
    ], TrueFalseComponent.prototype, "imagePath", void 0);
    __decorate([
        Input()
    ], TrueFalseComponent.prototype, "checkQuizSubmission", void 0);
    __decorate([
        Input()
    ], TrueFalseComponent.prototype, "preferredTextFormat", void 0);
    TrueFalseComponent = __decorate([
        Component({
            selector: "true-false",
            template: "<!-- ##################### QP Exam Engine type #######################-->\n<ng-container *ngIf=\"examEngineType == 'QP' || examEngineType == 'NCLEX'\">\n  <!-- Question and Answer  Block-->\n  <div class=\"wk-row\">\n    <media-carousel\n      *ngIf=\"\n        questionDetails1.assets &&\n        questionDetails1.assets.length != 0 &&\n        assetPosition != 'Bottom' &&\n        assetPosition != 'WithinText'\n      \"\n      [imagePath]=\"imagePath\"\n      [assetData]=\"assetData\"\n      [assetsPosition]=\"assetPosition\"\n    ></media-carousel>\n\n    <div\n      [ngClass]=\"{\n        'wk-col-8':\n          questionDetails1.assets != undefined &&\n          questionDetails1.assets.length != 0 &&\n          assetPosition != 'WithinText',\n        'wk-col-12':\n          questionDetails1.assets == undefined ||\n          questionDetails1.assets.length == 0 ||\n          assetPosition == 'WithinText',\n        'right-assets-position-question': assetPosition == 'Right',\n        'left-assets-position-question': assetPosition == 'Left',\n        'top-assets-position-question': assetPosition == 'Top',\n        'bottom-assets-position-question': assetPosition == 'Bottom'\n      }\"\n    >\n      <div class=\"wkqp-layout-item\">\n        <div class=\"wkqp-field-item normal-font mb0 \">\n          <div class=\"wkqp-field-header\" *ngIf=\"assetPosition != 'WithinText'\">\n            <div\n              class=\"mb20 normal-font wkqp-prewrap\"\n              libGetFormatText\n              [preferredTextFormat]=\"preferredTextFormat\"\n              [plainText]=\"questionDetails1.promptText\"\n              [richText]=\"questionDetails1.richPromptText\"\n            ></div>\n          </div>\n          <div class=\"wkqp-field-header\" *ngIf=\"assetPosition == 'WithinText'\">\n            <item-text-assets\n              [promptText]=\"questionDetails1.promptText\"\n              [imagePath]=\"imagePath\"\n              [assetData]=\"assetData\"\n              [assetsPosition]=\"assetPosition\"\n            ></item-text-assets>\n          </div>\n        </div>\n      </div>\n      <media-carousel\n        *ngIf=\"\n          questionDetails1.assets &&\n          questionDetails1.assets.length != 0 &&\n          assetPosition == 'Bottom' &&\n          assetPosition != 'WithinText'\n        \"\n        [imagePath]=\"imagePath\"\n        [assetData]=\"assetData\"\n        [assetsPosition]=\"assetPosition\"\n      ></media-carousel>\n      <div class=\"common-full-width\">\n        <fieldset class=\"common-full-width mb20\">\n          <legend\n            class=\"offscreen\"\n            libGetFormatText\n            [preferredTextFormat]=\"preferredTextFormat\"\n            [plainText]=\"questionDetails1.promptText\"\n            [richText]=\"questionDetails1.richPromptText\"\n          ></legend>\n\n          <form [formGroup]=\"form\">\n            <ng-container\n              *ngFor=\"\n                let item of questionDetails1.choiceInteraction.simpleChoices\n              \"\n            >\n              <div class=\"wkqp-radio-field common-full-width pt0mb0\">\n                <span\n                  *ngIf=\"message\"\n                  [ngClass]=\"getChoiceClassName(item)\"\n                ></span>\n                <input\n                  type=\"radio\"\n                  [hidden]=\"message\"\n                  [value]=\"item.choiceId\"\n                  (change)=\"selectAnswer(item)\"\n                  formControlName=\"choices\"\n                />\n                <span\n                  libGetFormatText\n                  [preferredTextFormat]=\"preferredTextFormat\"\n                  [plainText]=\"item.label\"\n                  [richText]=\"item.richLabel\"\n                ></span>\n              </div>\n              <div\n                class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap\"\n                *ngIf=\"message && item.rationale\"\n              >\n                <strong>Rationale: </strong>\n                <span\n                  libGetFormatText\n                  [preferredTextFormat]=\"preferredTextFormat\"\n                  [plainText]=\"item.rationale\"\n                  [richText]=\"item.richRationale\"\n                ></span>\n              </div>\n            </ng-container>\n          </form>\n        </fieldset>\n      </div>\n\n      <div *ngIf=\"canShowMetadata && message != true\">\n        <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n      </div>\n      <!--User answer and correct answer-->\n      <ng-container *ngIf=\"message\">\n        <p\n          class=\"wkqp-prewrap  mb20\"\n          [ngClass]=\"\n            isUserAnswersCorrect()\n              ? 'wkqp-alert-success wkqp-success'\n              : 'wkqp-alert-danger wkqp-danger'\n          \"\n          *ngIf=\"userAnswer.length !== 0\"\n        >\n          <strong>Your Response:</strong>\n          <span\n            class=\"optionlevel\"\n            libGetFormatText\n            [preferredTextFormat]=\"preferredTextFormat\"\n            [plainText]=\"radioValue['label']\"\n            [richText]=\"radioValue['richLabel']\"\n          ></span>\n        </p>\n        <p\n          class=\"wkqp-prewrap wkqp-alert-success wkqp-success  mb20\"\n          *ngIf=\"!isUserAnswersCorrect()\"\n        >\n          <strong>Correct Response:</strong>\n          <span\n            class=\"optionlevel\"\n            libGetFormatText\n            [preferredTextFormat]=\"preferredTextFormat\"\n            [plainText]=\"correctAns.label\"\n            [richText]=\"correctAns.richLabel\"\n          ></span>\n        </p>\n        <div *ngIf=\"canShowMetadata\">\n          <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"rationale-remedation-block mb20\" *ngIf=\"message\">\n      <lib-rationale\n        [itemData]=\"questionDetails1.modelFeedback\"\n        [preferredTextFormat]=\"preferredTextFormat\"\n      ></lib-rationale>\n      <lib-remediation\n        [itemData]=\"questionDetails1.remediationLinks\"\n        [preferredTextFormat]=\"preferredTextFormat\"\n      ></lib-remediation>\n    </div>\n  </div>\n</ng-container>\n\n<!-- ##################### USMLE Exam Engine type #######################-->\n<ng-container *ngIf=\"examEngineType == 'USMLE'\">\n  <!-- Question and Answer  Block-->\n  <div class=\"wk-row\">\n    <media-carousel\n      [imagePath]=\"imagePath\"\n      *ngIf=\"\n        questionDetails1.assets &&\n        questionDetails1.assets.length != 0 &&\n        assetPosition != 'Bottom' &&\n        assetPosition != 'WithinText'\n      \"\n      [assetData]=\"assetData\"\n      [assetsPosition]=\"assetPosition\"\n    ></media-carousel>\n\n    <div\n      [ngClass]=\"{\n        'wk-col-8':\n          questionDetails1.assets != undefined &&\n          questionDetails1.assets.length != 0 &&\n          assetPosition != 'WithinText',\n        'wk-col-12':\n          questionDetails1.assets == undefined ||\n          questionDetails1.assets.length == 0 ||\n          assetPosition == 'WithinText',\n        'right-assets-position-question': assetPosition == 'Right',\n        'left-assets-position-question': assetPosition == 'Left',\n        'top-assets-position-question': assetPosition == 'Top',\n        'bottom-assets-position-question': assetPosition == 'Bottom'\n      }\"\n    >\n      <div class=\"wkqp-layout-item\">\n        <div class=\"wkqp-field-item normal-font mb0 \">\n          <div class=\"wkqp-field-header\" *ngIf=\"assetPosition != 'WithinText'\">\n            <div class=\"normal-font wkqp-prewrap\">\n              {{ questionDetails1.promptText }}\n            </div>\n          </div>\n          <div class=\"wkqp-field-header\" *ngIf=\"assetPosition == 'WithinText'\">\n            <item-text-assets\n              [promptText]=\"questionDetails1.promptText\"\n              [imagePath]=\"imagePath\"\n              [assetData]=\"assetData\"\n              [assetsPosition]=\"assetPosition\"\n            ></item-text-assets>\n          </div>\n        </div>\n      </div>\n      <div class=\"common-full-width\">\n        <fieldset class=\"common-full-width\">\n          <legend class=\"offscreen\">{{ questionDetails1.promptText }}</legend>\n\n          <div class=\"option-wrapper\">\n            <form [formGroup]=\"form\">\n              <ng-container\n                *ngFor=\"\n                  let item of questionDetails1.choiceInteraction.simpleChoices;\n                  let i = index\n                \"\n              >\n                <div\n                  class=\"answer-wrapper\"\n                  [ngClass]=\"{\n                    'correct-answer':\n                      item.correct == true && checkQuizSubmission == true\n                  }\"\n                >\n                  <span\n                    *ngIf=\"checkQuizSubmission == true\"\n                    [ngClass]=\"getChoiceClassName(item)\"\n                  ></span>\n                  <input\n                    type=\"radio\"\n                    [hidden]=\"checkQuizSubmission == true\"\n                    [value]=\"item.choiceId\"\n                    (change)=\"selectAnswer(item)\"\n                    formControlName=\"choices\"\n                  />\n                  <span>{{ alphabetsIndex[i] }}.</span>\n                  <span style=\"padding-left: 6px;\">{{ item.label }}</span>\n                </div>\n                <!-- <div class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap\" *ngIf=\" checkQuizSubmission == true && item.rationale\">{{item.rationale}}</div> -->\n              </ng-container>\n            </form>\n          </div>\n          <div\n            class=\"examTaker-explanations ember-view raph-examTakerExplanations\"\n            *ngIf=\"checkQuizSubmission == true\"\n          >\n            <div class=\"raph-examTakerExplanations-correctExplanation-title\">\n              Answer Explanation\n            </div>\n            <ng-container\n              *ngFor=\"\n                let item of questionDetails1.choiceInteraction.simpleChoices;\n                let i = index\n              \"\n            >\n              <div\n                class=\"raph-examTakerExplanations-correctExplanation-content\"\n                *ngIf=\"item.correct == true\"\n              >\n                <div\n                  class=\"raph-examTakerExplanations-correctExplanation-content-label\"\n                >\n                  The correct answer is\n                  <div\n                    class=\"raph-examTakerExplanations-correctExplanation-letter\"\n                  >\n                    {{ alphabetsIndex[i] }}\n                  </div>\n                </div>\n\n                <div\n                  id=\"ember13569\"\n                  class=\"raph-examTakerExplanations-correctExplanation-content-content ember-view katexHtml\"\n                  *ngIf=\"item.correct == true\"\n                >\n                  <div>\n                    <p>\n                      {{ questionDetails1.modelFeedback[0].feedbackText }}\n                    </p>\n                    <p></p>\n                  </div>\n                </div>\n              </div>\n              <!-- <div class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap\" *ngIf=\" checkQuizSubmission == true && item.rationale\">{{item.rationale}}</div> -->\n            </ng-container>\n          </div>\n          <div\n            class=\"raph-examTakerExplanations-incorrectExplanations\"\n            *ngIf=\"\n              checkQuizSubmission == true && incorrectRationale.length !== 0\n            \"\n          >\n            <div class=\"raph-examTakerExplanations-incorrectExplanations-title\">\n              Incorrect answer explanations\n            </div>\n            <ng-container\n              *ngFor=\"\n                let item of questionDetails1.choiceInteraction.simpleChoices;\n                let i = index\n              \"\n            >\n              <div\n                class=\"raph-examTakerExplanations-incorrectExplanations-content\"\n              >\n                <div\n                  class=\"raph-examTakerExplanations-incorrectExplanations-explanation\"\n                  *ngIf=\"item.correct !== true && item.rationale !== null\"\n                >\n                  <div\n                    class=\"raph-examTakerExplanations-incorrectExplanations-explanation-letter\"\n                  >\n                    {{ alphabetsIndex[i] }}.\n                  </div>\n                  <div\n                    id=\"ember13628\"\n                    class=\"raph-examTakerExplanations-incorrectExplanations-explanation-body ember-view katexHtml\"\n                  >\n                    <div>\n                      <p>\n                        <!-- <strong>Rationale: </strong>  -->\n                        {{ item.rationale == null ? 'NA' : item.rationale }}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </fieldset>\n      </div>\n      <media-carousel\n        *ngIf=\"\n          questionDetails1.assets &&\n          questionDetails1.assets.length != 0 &&\n          assetPosition == 'Bottom' &&\n          assetPosition != 'WithinText'\n        \"\n        [imagePath]=\"imagePath\"\n        [assetData]=\"assetData\"\n        [assetsPosition]=\"assetPosition\"\n      ></media-carousel>\n    </div>\n  </div>\n</ng-container>\n",
            styles: [".option-wrapper{display:table;padding:7px;border:1px solid #3852a4;border-bottom-width:5px;max-width:400px}.answer-wrapper{padding:4px;display:table;width:100%;border-radius:3px}.correct-answer{border:1px solid #090;background-color:#9f9}.answer-explanation{padding:7.5px 15px;background-color:orange;font-size:15px;line-height:16px;font-weight:700}.raph-examTakerExplanations-correctExplanation-title{padding:7.5px 15px;background-color:orange;font-size:15px;line-height:16px;font-weight:700}.examTaker-content .examTaker-explanations{max-width:400px;margin-top:21px}.raph-examTakerExplanations{display:table;border:1px solid #3852a4;border-bottom-width:5px}.raph-examTakerExplanations-correctExplanation-content{padding:15px}.raph-examTakerExplanations-correctExplanation-content-label{line-height:1.5}.raph-examTakerExplanations-correctExplanation-letter{display:inline;text-transform:uppercase;font-weight:700}.raph-examTakerExplanations-correctExplanation-content .raph-examTakerExplanations-correctExplanation-content-content{margin-top:15px}.raph-examTakerExplanations-correctExplanation-content-content{line-height:1.5}.raph-examTakerExplanations-incorrectExplanations{display:table;border:1px solid #3852a4;border-bottom-width:5px;width:400px}.raph-examTakerExplanations-incorrectExplanations-title{font-size:80%;line-height:150%;background-color:#d7dced;border-bottom:1px solid #aab;text-align:center;font-weight:700}.raph-examTakerExplanations-incorrectExplanations-content{padding:6px}.raph-examTakerExplanations-incorrectExplanations-content .raph-examTakerExplanations-incorrectExplanations-explanation:not(:last-child){margin-bottom:6px}.raph-examTakerExplanations-incorrectExplanations-explanation{display:flex}.raph-examTakerExplanations-incorrectExplanations-explanation .raph-examTakerExplanations-incorrectExplanations-explanation-letter{width:24px;min-width:24px}.raph-examTakerExplanations-incorrectExplanations-explanation-letter{text-transform:uppercase;line-height:1.5}.layout-default .layout-default-content,.raph-examTakerExplanations-incorrectExplanations-explanation .raph-examTakerExplanations-incorrectExplanations-explanation-body{flex-grow:1}.raph-examTakerExplanations-incorrectExplanations-explanation-body{line-height:1.5}"]
        })
    ], TrueFalseComponent);
    return TrueFalseComponent;
}());
export { TrueFalseComponent };
//# sourceMappingURL=data:application/json;base64, 