import { __decorate } 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";
let ClinicalMultipleChoiceComponent = class ClinicalMultipleChoiceComponent {
    constructor(itemService, formBuilder) {
        this.itemService = itemService;
        this.formBuilder = formBuilder;
        // Declare the variables
        this.userAnswer = [];
        this.correctAns = [];
        this.className = "";
        this.userResponse = false;
        this.assetData = [];
        this.userSelectedLabel = [];
        this.radioValue = {};
        this.questionDetails1 = [];
        this.assetPosition = [];
        this.incorrectRationale = [];
        this.imagePath = [];
    }
    get questionDetails() {
        return this.questionDetails;
    }
    set questionCurrentData(value) {
        if (value) {
            this.questionDetails1 = value;
            this.createQuestion();
        }
        else {
            this.questionDetails1 = [];
            this.createQuestion();
        }
    }
    /* Init */
    ngOnInit() { }
    ngOnChanges(changes) { }
    /*Do check */
    ngDoCheck() {
        // Clear response
        if (this.isClearAnswer === true) {
            this.clearUserInputs();
            this.itemService.userAnswerMethod([]);
            this.itemService.clearAnswerMethodFalse(false);
            this.itemService.hideAnswer(false);
        }
        // Show or hide response
        if (this.isShowHide === true) {
            this.message = true;
        }
        else if (this.isShowHide === false) {
            this.message = false;
        }
    }
    /* function to get correct answer */
    correctAnswer() {
        for (const i of this.questionDetails1.choiceInteraction.simpleChoices) {
            if (i.correct === true) {
                this.correctAns = i;
            }
        }
        this.incorrectRationale = this.questionDetails1.choiceInteraction.simpleChoices.filter(item => item.rationale !== null && item.correct !== true);
    }
    /* function to get selected answer */
    selectAnswer(option) {
        //conosole.log('radioValue', this.form.controls['choices'].value);
        this.radioValue = option;
        this.userAnswer = this.radioValue["choiceId"];
        if (this.userAnswer !== undefined && this.userAnswer !== null) {
            const answerObj = [this.userAnswer];
            this.itemService.userAnswerMethod(answerObj);
            this.itemService.validateAnswerValueMethod(this.isUserAnswersCorrect());
        }
        else {
            this.itemService.userAnswerMethod([]);
            this.itemService.validateAnswerValueMethod(false);
        }
    }
    /* Check user answer is correct */
    isUserAnswersCorrect() {
        if (this.userAnswer === this.correctAns.choiceId) {
            return true;
        }
        else {
            return false;
        }
    }
    /* function to clear user inputs */
    clearUserInputs() {
        this.userAnswer = [];
        this.form.reset();
    }
    /* Get answer css class based on the user answer */
    getChoiceClassName(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 changes */
    valueChanged() {
        if (this.userAnswer !== undefined && this.userAnswer !== null) {
            const 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);
        }
    }
    createQuestion() {
        this.radioValue = {};
        this.userAnswer = [];
        this.correctAns = [];
        this.incorrectRationale = [];
        this.itemService.userAnswerMethod([]);
        this.itemService.validateAnswerValueMethod(false);
        this.assetData = this.questionDetails1.parentDetails.assets;
        if (this.assetData.length !== 0) {
            this.assetPosition = this.questionDetails1.parentDetails.assets[0]["assetsPosition"];
        }
        this.correctAnswer();
        if (this.questionDetails1.userAttemptDetails.userAnswer !== undefined &&
            Object.keys(this.questionDetails1.userAttemptDetails.userAnswer)
                .length !== 0) {
            for (const j of this.questionDetails1.choiceInteraction.simpleChoices) {
                if (this.questionDetails1.userAttemptDetails.userAnswer[0] ===
                    j["choiceId"]) {
                    this.radioValue = j;
                    this.userAnswer = this.radioValue["choiceId"];
                }
            }
        }
        this.form = this.formBuilder.group({
            choices: [this.radioValue["choiceId"]]
        });
        this.valueChanged();
    }
};
ClinicalMultipleChoiceComponent.ctorParameters = () => [
    { type: ItemService },
    { type: FormBuilder }
];
__decorate([
    Input("questionDetails")
], ClinicalMultipleChoiceComponent.prototype, "questionCurrentData", null);
__decorate([
    Input()
], ClinicalMultipleChoiceComponent.prototype, "examEngineType", void 0);
__decorate([
    Input()
], ClinicalMultipleChoiceComponent.prototype, "canShowMetadata", void 0);
__decorate([
    Input()
], ClinicalMultipleChoiceComponent.prototype, "isClearAnswer", void 0);
__decorate([
    Input()
], ClinicalMultipleChoiceComponent.prototype, "isShowHide", void 0);
__decorate([
    Input()
], ClinicalMultipleChoiceComponent.prototype, "imagePath", void 0);
__decorate([
    Input()
], ClinicalMultipleChoiceComponent.prototype, "checkQuizSubmission", void 0);
__decorate([
    Input()
], ClinicalMultipleChoiceComponent.prototype, "preferredTextFormat", void 0);
ClinicalMultipleChoiceComponent = __decorate([
    Component({
        selector: "clinical-multiple-choice",
        template: "<!--############################ QP Exam Engine Type ####################################-->\n<ng-container *ngIf=\"examEngineType == 'QP' || examEngineType == 'NCLEX'\">\n  <!--Question and Answer Choice-->\n  <div class=\"wkqp-row clinical-res-mb0 clinical-minhight fullwidth-box\">\n    <!--Answer Choice-->\n    <div class=\"wkqp-row clinical-res fullwidth-box\">\n      <div class=\"wkqp-layout-item\">\n        <div class=\"normal-font mb0 fullwidth-box\">\n          <fieldset class=\"common-full-width\">\n            <legend class=\"offscreen\">\n              <span\n                libGetFormatText\n                [preferredTextFormat]=\"preferredTextFormat\"\n                [plainText]=\"questionDetails1.promptText\"\n                [richText]=\"questionDetails1.richPromptText\"\n              ></span>\n            </legend>\n\n            <form [formGroup]=\"form\">\n              <ng-container\n                *ngFor=\"\n                  let item of questionDetails1.choiceInteraction.simpleChoices\n                \"\n              >\n                <div class=\"common-full-width choice-mb\">\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 mt10 wkqp-prewrap correct-rationale-section wkqp-prewrap rational-inline\"\n                  *ngIf=\"message && item.rationale\"\n                >\n                  <strong class=\"white-space-normal\">Rationale: </strong>\n                  <span\n                    class=\"white-space-normal\"\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      </div>\n    </div>\n\n    <!--Question Text-->\n    <div class=\"wkqp-field-item\">\n      <div class=\"wkqp-field-header custom-field-header\">\n        <p\n          class=\"mb20 normal-font wkqp-prewrap heading-h2 heading-h2-pb0 question-prompt-text ng-binding\"\n        >\n          <span\n            libGetFormatText\n            [preferredTextFormat]=\"preferredTextFormat\"\n            [plainText]=\"questionDetails1.promptText\"\n            [richText]=\"questionDetails1.richPromptText\"\n          ></span>\n        </p>\n      </div>\n    </div>\n\n    <div class=\"wkqp-row mb20 clinical-res\">\n      <div class=\"wkqp-field-header label-heading clinical-heading \">\n        <span>Clinical Presenting Symptoms</span>\n      </div>\n\n      <!--Carousel-->\n      <media-carousel\n        *ngIf=\"\n          questionDetails1.parentDetails.assets &&\n          questionDetails1.parentDetails.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.parentDetails.assets != undefined &&\n            questionDetails1.parentDetails.assets.length != 0 &&\n            assetPosition != 'WithinText',\n          'wk-col-12':\n            questionDetails1.parentDetails.assets == undefined ||\n            questionDetails1.parentDetails.assets.length == 0 ||\n            assetPosition == 'WithinText',\n          'right-assets-position-question clinical-multiple-choice-right-wk-col-8':\n            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\n              class=\"wkqp-field-header\"\n              *ngIf=\"assetPosition != 'WithinText'\"\n            >\n              <p\n                class=\"mb20 normal-font wkqp-prewrap heading-h3 headingh3-res question-parent-text\"\n              >\n                {{ questionDetails1.parentDetails.promptText }}\n              </p>\n            </div>\n            <div\n              class=\"wkqp-field-header\"\n              *ngIf=\"assetPosition == 'WithinText'\"\n            >\n              <item-text-assets\n                [promptText]=\"questionDetails1.parentDetails.promptText\"\n                [imagePath]=\"imagePath\"\n                [assetData]=\"assetData\"\n                [assetsPosition]=\"assetPosition\"\n              ></item-text-assets>\n            </div>\n          </div>\n        </div>\n\n        <media-carousel\n          *ngIf=\"\n            questionDetails1.parentDetails.assets &&\n            questionDetails1.parentDetails.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  </div>\n  <div *ngIf=\"canShowMetadata && message != true\">\n    <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n  </div>\n\n  <!--User answer and show answer -->\n  <ng-container *ngIf=\"message\">\n    <!--your answer-->\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    <!--Correct response-->\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    <div class=\"common-full-width mb20\">\n      <lib-rationale\n        [itemData]=\"questionDetails1.modelFeedback\"\n        [preferredTextFormat]=\"preferredTextFormat\"\n      ></lib-rationale>\n      <!--Remediation-->\n      <lib-remediation\n        [itemData]=\"questionDetails1.remediationLinks\"\n        [preferredTextFormat]=\"preferredTextFormat\"\n      ></lib-remediation>\n    </div>\n  </ng-container>\n</ng-container>\n\n<!--############################ USMLE Exam Engine Type ####################################-->\n<ng-container *ngIf=\"examEngineType == 'USMLE'\">\n  <!--Question and answer choice-->\n  <div class=\"wkqp-row mb20 clinical-res-mb0 clinical-minhight\">\n    <!--Answer Choice-->\n    <div class=\"wkqp-row mb20 clinical-res\">\n      <div class=\"wkqp-layout-item\">\n        <div class=\"wkqp-field-item normal-font mb0\">\n          <fieldset class=\"common-full-width\">\n            <legend class=\"offscreen\">{{ questionDetails1.promptText }}</legend>\n\n            <form [formGroup]=\"form\">\n              <ng-container\n                *ngFor=\"\n                  let item of questionDetails1.choiceInteraction.simpleChoices\n                \"\n              >\n                <div>\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>{{ item.label }}</span>\n                </div>\n                <div\n                  class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap\"\n                  *ngIf=\"checkQuizSubmission == true && item.rationale\"\n                >\n                  <strong>Rationale: </strong>{{ item.rationale }}\n                </div>\n              </ng-container>\n            </form>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n\n    <!--Question text-->\n    <div class=\"wkqp-field-item\">\n      <div class=\"wkqp-field-header custom-field-header\">\n        <div class=\"mb20 normal-font wkqp-prewrap heading-h2 heading-h2-pb0\">\n          {{ questionDetails1.promptText }}\n        </div>\n      </div>\n    </div>\n    <div class=\"wkqp-row mb20 clinical-res\">\n      <div class=\"wkqp-field-header label-heading clinical-heading\">\n        <span>Clinical Presenting Symptoms</span>\n      </div>\n\n      <!--Carousel-->\n      <media-carousel\n        *ngIf=\"\n          questionDetails1.parentDetails.assets &&\n          questionDetails1.parentDetails.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.parentDetails.assets != undefined &&\n            questionDetails1.parentDetails.assets.length != 0 &&\n            assetPosition != 'WithinText',\n          'wk-col-12':\n            questionDetails1.parentDetails.assets == undefined ||\n            questionDetails1.parentDetails.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\n              class=\"wkqp-field-header\"\n              *ngIf=\"assetPosition != 'WithinText'\"\n            >\n              <div class=\"mb20 normal-font wkqp-prewrap\">\n                {{ questionDetails1.parentDetails.promptText }}\n              </div>\n            </div>\n            <div\n              class=\"wkqp-field-header\"\n              *ngIf=\"assetPosition == 'WithinText'\"\n            >\n              <item-text-assets\n                [promptText]=\"questionDetails1.parentDetails.promptText\"\n                [imagePath]=\"imagePath\"\n                [assetData]=\"assetData\"\n                [assetsPosition]=\"assetPosition\"\n              ></item-text-assets>\n            </div>\n          </div>\n        </div>\n\n        <media-carousel\n          *ngIf=\"\n            questionDetails1.parentDetails.assets &&\n            questionDetails1.parentDetails.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  </div>\n\n  <!--User answer and correct answer-->\n  <ng-container *ngIf=\"checkQuizSubmission == true\">\n    <!-- User answer -->\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 class=\"optionlevel\">{{ radioValue['label'] }}</span>\n    </p>\n\n    <!--Correct answer-->\n    <p\n      class=\"wkqp-prewrap wkqp-alert-success wkqp-success \"\n      *ngIf=\"!isUserAnswersCorrect()\"\n    >\n      <strong>Correct Response:</strong>\n      <span class=\"optionlevel\">{{ correctAns.label }}</span>\n    </p>\n\n    <!--Rationale-->\n    <p\n      class=\"wk-row common-full-width\"\n      *ngIf=\"questionDetails1.modelFeedback[0].length !== 0\"\n    >\n      <strong>Rationale:</strong>\n      <span>{{ questionDetails1.modelFeedback[0].feedbackText }}</span>\n    </p>\n\n    <!--Remediation-->\n    <div\n      class=\"wk-row common-full-width\"\n      *ngIf=\"questionDetails1.remediationLinks.length !== 0\"\n    >\n      <strong>Remediation:</strong>\n      <div\n        *ngFor=\"\n          let Remediation of questionDetails1.remediationLinks;\n          let k = index\n        \"\n      >\n        <span *ngIf=\"Remediation.linkTypeId == 1\">{{\n          Remediation.linkText1\n        }}</span>\n        <span *ngIf=\"Remediation.linkTypeId != 1\">\n          {{ Remediation.linkText1 }}</span\n        >\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n",
        styles: [".clinical-multiple-choice-right-wk-col-8{width:64%!important;padding:0}.choice-mb{margin-bottom:.1875rem}"]
    })
], ClinicalMultipleChoiceComponent);
export { ClinicalMultipleChoiceComponent };
//# sourceMappingURL=data:application/json;base64, 