import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
import { ItemService } from '../../item-service/item-service.service';
import { FormBuilder, FormGroup } from '@angular/forms';
let MedicalMultipleChoiceComponent = class MedicalMultipleChoiceComponent {
    constructor(itemService, formBuilder) {
        this.itemService = itemService;
        this.formBuilder = formBuilder;
        // Declare the variables
        this.userAnswer = [];
        this.correctAns = [];
        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 answer req
        if (this.isClearAnswer === true) {
            this.clearUserInputs();
            this.itemService.userAnswerMethod([]);
            this.itemService.clearAnswerMethodFalse(false);
            this.itemService.hideAnswer(false);
        }
        // Show and hide answer req
        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) {
        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 wheather the user answer is corect or not */
    isUserAnswersCorrect() {
        if (this.userAnswer === this.correctAns.choiceId) {
            return true;
        }
        else {
            return false;
        }
    }
    /* function to clear user inputs */
    clearUserInputs() {
        this.userAnswer = [];
        this.form.reset();
    }
    /* Get choice class name */
    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 changeds */
    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) {
            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();
    }
};
MedicalMultipleChoiceComponent.ctorParameters = () => [
    { type: ItemService },
    { type: FormBuilder }
];
__decorate([
    Input('questionDetails')
], MedicalMultipleChoiceComponent.prototype, "questionCurrentData", null);
__decorate([
    Input()
], MedicalMultipleChoiceComponent.prototype, "examEngineType", void 0);
__decorate([
    Input()
], MedicalMultipleChoiceComponent.prototype, "canShowMetadata", void 0);
__decorate([
    Input()
], MedicalMultipleChoiceComponent.prototype, "isClearAnswer", void 0);
__decorate([
    Input()
], MedicalMultipleChoiceComponent.prototype, "isShowHide", void 0);
__decorate([
    Input()
], MedicalMultipleChoiceComponent.prototype, "imagePath", void 0);
__decorate([
    Input()
], MedicalMultipleChoiceComponent.prototype, "checkQuizSubmission", void 0);
__decorate([
    Input()
], MedicalMultipleChoiceComponent.prototype, "preferredTextFormat", void 0);
MedicalMultipleChoiceComponent = __decorate([
    Component({
        selector: 'medical-multiple-choice',
        template: "<!-- ######################## QP Exam Engine Type ###############################-->\n<ng-container *ngIf=\"examEngineType == 'QP' || examEngineType == 'NCLEX'\">\n  <div class=\"wk-row\">\n    <div class=\"wkqp-field-header label-heading clinical-heading\">\n      <span>Case Scenario/Description</span>\n    </div>\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 medical-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 class=\"wkqp-field-header\" *ngIf=\"assetPosition != 'WithinText'\">\n            <p\n              class=\"mb20 normal-font wkqp-prewrap heading-h3 headingh3-res question-parent-text\"\n              libGetFormatText\n              [preferredTextFormat]=\"preferredTextFormat\"\n              [plainText]=\"questionDetails1.parentDetails.promptText\"\n              [richText]=\"questionDetails1.parentDetails.richPromptText\"\n            ></p>\n          </div>\n          <div\n            class=\"wkqp-field-header custom-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 class=\"wk-row mb20\">\n    <div class=\"wkqp-field-item\">\n      <div\n        class=\"wkqp-field-header custom-field-header\"\n        *ngIf=\"assetPosition != 'WithinText'\"\n      >\n        <p\n          class=\"mb20 normal-font wkqp-prewrap heading-h2 heading-h2-pb0 question-prompt-text ng-binding\"\n          libGetFormatText\n          [preferredTextFormat]=\"preferredTextFormat\"\n          [plainText]=\"questionDetails1.promptText\"\n          [richText]=\"questionDetails1.richPromptText\"\n        ></p>\n      </div>\n    </div>\n    <div class=\"wkqp-layout-item\">\n      <div class=\"wkqp-field-item normal-font mb0\">\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              <fieldset class=\"common-full-width\">\n                <legend\n                  class=\"offscreen\"\n                  libGetFormatText\n                  [preferredTextFormat]=\"preferredTextFormat\"\n                  [plainText]=\"questionDetails1.promptText\"\n                  [richText]=\"questionDetails1.richPromptText\"\n                ></legend>\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              </fieldset>\n            </div>\n            <div\n              class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap rational-inline\"\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      </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 correct answer block-->\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    <div class=\"rationale-remedation-block mb20\" *ngIf=\"message\">\n      <lib-rationale\n        [itemData]=\"questionDetails1.modelFeedback\"\n        [preferredTextFormat]=\"preferredTextFormat\"\n      ></lib-rationale>\n\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  <div class=\"wk-row\">\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 class=\"wkqp-field-header\" *ngIf=\"assetPosition != 'WithinText'\">\n            <div class=\"mb20 normal-font wkqp-prewrap\">\n              {{ questionDetails1.parentDetails.promptText }}\n            </div>\n          </div>\n          <div class=\"wkqp-field-header\" *ngIf=\"assetPosition == 'WithinText'\">\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\n  <div class=\"wk-row\">\n    <div class=\"wkqp-field-item\">\n      <div class=\"wkqp-field-header custom-field-header\">\n        <div class=\"mb20 normal-font wkqp-prewrap\">\n          {{ questionDetails1.promptText }}\n        </div>\n      </div>\n    </div>\n    <div class=\"wkqp-layout-item\">\n      <div class=\"wkqp-field-item normal-font mb0\">\n        <form [formGroup]=\"form\">\n          <ng-container\n            *ngFor=\"\n              let item of questionDetails1.choiceInteraction.simpleChoices\n            \"\n          >\n            <div>\n              <fieldset class=\"common-full-width\">\n                <legend class=\"offscreen\">\n                  {{ questionDetails1.promptText }}\n                </legend>\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              </fieldset>\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      </div>\n    </div>\n  </div>\n\n  <!--USer answer and correct answer Block-->\n  <ng-container *ngIf=\"checkQuizSubmission == true\">\n    <p\n      class=\"wkqp-prewrap  \"\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    <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    <p *ngIf=\"questionDetails1.modelFeedback[0].length !== 0\">\n      <strong>Rationale:</strong>\n      <span>{{ questionDetails1.modelFeedback[0].feedbackText }}</span>\n    </p>\n    <div *ngIf=\"questionDetails1.remediationLinks.length !== 0\">\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: [".medical-multiple-choice-right-wk-col-8{width:64%!important;padding:0}.choice-mb{margin-bottom:.1875rem}"]
    })
], MedicalMultipleChoiceComponent);
export { MedicalMultipleChoiceComponent };
//# sourceMappingURL=data:application/json;base64, 