import { __decorate } from "tslib";
import { Component, Input } from "@angular/core";
import { ItemService } from "../../item-service/item-service.service";
import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn, AbstractControl } from "@angular/forms";
let MedicalMultipleResponseComponent = class MedicalMultipleResponseComponent {
    constructor(itemService, formBuilder) {
        this.itemService = itemService;
        this.formBuilder = formBuilder;
        //Declare the variables
        this.userAnswer = [];
        this.correctAns = [];
        this.assetData = [];
        this.selectedOrderIds = [];
        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) {
        //  console.log('medical multiple response changes', changes);
    }
    /* Do check */
    ngDoCheck() {
        // Clear user answer
        if (this.isClearAnswer === true) {
            this.clearUserInputs();
            this.itemService.userAnswerMethod([]);
            this.itemService.clearAnswerMethodFalse(false);
            this.itemService.hideAnswer(false);
        }
        // Show and hide answer
        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.push(i);
                this.correctAnsString = (this.correctAnsString) ? this.correctAnsString + ', ' + i.label : i.label;
            }
        }
        this.incorrectRationale = this.questionDetails1.choiceInteraction.simpleChoices.filter(item => item.rationale !== null && item.correct !== true);
    }
    /* function to get selected answer */
    selectAnswer(option, i) {
        this.selectedOrderIds = this.form.value.orders
            .map((v, i) => v
            ? this.questionDetails1.choiceInteraction.simpleChoices[i].choiceId
            : null)
            .filter(v => v !== null);
        this.commaSeperatedUserResponseLabel();
        this.userAnswer = this.selectedOrderIds;
        if (this.userAnswer.length !== 0) {
            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 correct or not */
    isUserAnswersCorrect() {
        this.selectedOrderIds = this.form.value.orders
            .map((v, i) => v
            ? this.questionDetails1.choiceInteraction.simpleChoices[i].choiceId
            : null)
            .filter(v => v !== null);
        if (this.selectedOrderIds.length !== this.correctAns.length) {
            return false;
        }
        else {
            for (const answer of this.correctAns) {
                if (!this.selectedOrderIds.find(item => item === answer.choiceId)) {
                    return false;
                }
            }
        }
        return true;
    }
    /* function to clear user inputs */
    clearUserInputs() {
        this.userAnswer = [];
        this.form.reset();
    }
    /* Get choice class */
    getChoiceClassName(choiceDetails) {
        let checked = false;
        for (const item of this.selectedOrderIds) {
            if (choiceDetails["choiceId"] === item) {
                checked = true;
            }
        }
        if (choiceDetails.correct) {
            return "wk-icon-checkmark green-checkmark";
        }
        else if (!choiceDetails.correct && checked === true) {
            return "wk-icon-close wrong-checkmark";
        }
        else {
            return "wk-icon-checkmark disabled-checkmark";
        }
    }
    /* Check the value is changed or not */
    valueChanged() {
        this.selectedOrderIds = this.form.value.orders
            .map((v, i) => v
            ? this.questionDetails1.choiceInteraction.simpleChoices[i].choiceId
            : null)
            .filter(v => v !== null);
        this.commaSeperatedUserResponseLabel();
        this.userAnswer = this.selectedOrderIds;
        if (this.userAnswer.length !== 0) {
            const answerObj = this.userAnswer;
            this.itemService.userAnswerMethod(answerObj);
            this.itemService.validateAnswerValueMethod(this.isUserAnswersCorrect());
        }
        else {
            this.itemService.userAnswerMethod([]);
            this.itemService.validateAnswerValueMethod(false);
        }
    }
    getFormArray() {
        return this.form.get("orders");
    }
    createQuestion() {
        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"];
        }
        const controls = this.questionDetails1.choiceInteraction.simpleChoices.map(c => new FormControl(false));
        // controls[0].setValue(true);
        this.form = this.formBuilder.group({
            orders: new FormArray(controls)
        });
        this.getFormArray();
        if (this.questionDetails1.userAttemptDetails.userAnswer.length !== 0) {
            for (let i = 0; i < this.questionDetails1.choiceInteraction.simpleChoices.length; i++) {
                for (const j of this.questionDetails1.userAttemptDetails.userAnswer) {
                    if (this.questionDetails1.choiceInteraction.simpleChoices[i]["choiceId"] === j) {
                        controls[i].setValue(true);
                    }
                }
            }
            this.valueChanged();
        }
        this.correctAnswer();
    }
    commaSeperatedUserResponseLabel() {
        this.userResponseLabel = '';
        this.selectedOrderIds.forEach(selected => {
            const selectedChoice = this.questionDetails1.choiceInteraction.simpleChoices.find(choice => choice.choiceId == selected);
            if (selectedChoice) {
                this.userResponseLabel = (this.userResponseLabel) ? this.userResponseLabel + ', ' + selectedChoice.label : selectedChoice.label;
            }
        });
    }
};
MedicalMultipleResponseComponent.ctorParameters = () => [
    { type: ItemService },
    { type: FormBuilder }
];
__decorate([
    Input("questionDetails")
], MedicalMultipleResponseComponent.prototype, "questionCurrentData", null);
__decorate([
    Input()
], MedicalMultipleResponseComponent.prototype, "examEngineType", void 0);
__decorate([
    Input()
], MedicalMultipleResponseComponent.prototype, "canShowMetadata", void 0);
__decorate([
    Input()
], MedicalMultipleResponseComponent.prototype, "isClearAnswer", void 0);
__decorate([
    Input()
], MedicalMultipleResponseComponent.prototype, "isShowHide", void 0);
__decorate([
    Input()
], MedicalMultipleResponseComponent.prototype, "imagePath", void 0);
__decorate([
    Input()
], MedicalMultipleResponseComponent.prototype, "checkQuizSubmission", void 0);
__decorate([
    Input()
], MedicalMultipleResponseComponent.prototype, "preferredTextFormat", void 0);
MedicalMultipleResponseComponent = __decorate([
    Component({
        selector: "medical-multiple-response",
        template: "<!-- ############################ QP exam Engine Type ###########################-->\n<ng-container *ngIf=\"examEngineType == 'QP' || examEngineType == 'NCLEX'\">\n  <div class=\"wk-row mb20\">\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': 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=\"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=\"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        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      <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            formArrayName=\"orders\"\n            *ngFor=\"let order of getFormArray().controls; let i = index\"\n          >\n            <div class=\"common-full-width mt5\">\n              <span\n                *ngIf=\"message\"\n                [ngClass]=\"\n                  getChoiceClassName(\n                    questionDetails1.choiceInteraction.simpleChoices[i]\n                  )\n                \"\n              ></span>\n              <input\n                type=\"checkbox\"\n                [formControlName]=\"i\"\n                [hidden]=\"message\"\n                (change)=\"\n                  selectAnswer(\n                    questionDetails1.choiceInteraction.simpleChoices[i],\n                    i\n                  )\n                \"\n              />\n              <span\n                libGetFormatText\n                [preferredTextFormat]=\"preferredTextFormat\"\n                [plainText]=\"\n                  questionDetails1.choiceInteraction.simpleChoices[i].label\n                \"\n                [richText]=\"\n                  questionDetails1.choiceInteraction.simpleChoices[i].richLabel\n                \"\n              ></span>\n            </div>\n\n            <div\n              class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap rational-inline\"\n              *ngIf=\"\n                message &&\n                questionDetails1.choiceInteraction.simpleChoices[i].rationale\n              \"\n            >\n              <strong>Rationale: </strong>\n              <span\n                libGetFormatText\n                [preferredTextFormat]=\"preferredTextFormat\"\n                [plainText]=\"\n                  questionDetails1.choiceInteraction.simpleChoices[i].rationale\n                \"\n                [richText]=\"\n                  questionDetails1.choiceInteraction.simpleChoices[i]\n                    .richRationale\n                \"\n              ></span>\n            </div>\n          </ng-container>\n        </form>\n      </fieldset>\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-->\n  <ng-container *ngIf=\"message\">\n    <div\n      class=\"wkqp-prewrap  medical-multiple-response-wrap  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 class=\"your-response-left\">Your Response:</strong>\n      <span class=\"optionlevel\">{{ userResponseLabel }}</span>\n    </div>\n    <p\n      class=\"wkqp-prewrap wkqp-alert-success wkqp-success  mb20\"\n      *ngIf=\"!isUserAnswersCorrect()\"\n    >\n      <strong>Correct Response:</strong>\n      <span class=\"optionlevel\">{{ correctAnsString }}</span>\n    </p>\n    <div *ngIf=\"canShowMetadata\">\n      <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n    </div>\n    <div class=\"rationale-remedation-block mb20\">\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  <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      <fieldset class=\"common-full-width\">\n        <legend class=\"offscreen\">{{ questionDetails1.promptText }}</legend>\n        <!-- <ng-container *ngFor=\"let option of questionDetails1.choiceInteraction.simpleChoices;let i = index\">\n          <div>\n            <span *ngIf=\"message==true\" [ngClass]=\"getChoiceClassName(option)\"></span>\n            <input id=\"{{option.choiceId}}\" name=\"Multiple Response Answers\" [attr.aria-label]=\"option.label\" type=\"checkbox\"\n              [(ngModel)]=\"option.checked\" [hidden]=\"message\" (change)=\"selectAnswer(option, i)\" [checked]=\"option.checked\">\n            {{option.label}}\n          </div>\n        </ng-container> -->\n        <form [formGroup]=\"form\">\n          <ng-container\n            formArrayName=\"orders\"\n            *ngFor=\"let order of getFormArray().controls; let i = index\"\n          >\n            <div>\n              <span\n                *ngIf=\"checkQuizSubmission == true\"\n                [ngClass]=\"\n                  getChoiceClassName(\n                    questionDetails1.choiceInteraction.simpleChoices[i]\n                  )\n                \"\n              ></span>\n              <input\n                type=\"checkbox\"\n                [formControlName]=\"i\"\n                [hidden]=\"checkQuizSubmission == true\"\n                (change)=\"\n                  selectAnswer(\n                    questionDetails1.choiceInteraction.simpleChoices[i],\n                    i\n                  )\n                \"\n              />\n              {{ questionDetails1.choiceInteraction.simpleChoices[i].label }}\n            </div>\n            <div\n              class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap\"\n              *ngIf=\"\n                checkQuizSubmission == true &&\n                questionDetails1.choiceInteraction.simpleChoices[i].rationale\n              \"\n            >\n              <strong>Rationale: </strong>\n              {{\n                questionDetails1.choiceInteraction.simpleChoices[i].rationale\n              }}\n            </div>\n          </ng-container>\n        </form>\n      </fieldset>\n    </div>\n  </div>\n\n  <!--User answer and correct answer-->\n  <ng-container *ngIf=\"checkQuizSubmission == true\">\n    <div\n      class=\"wkqp-prewrap  medical-multiple-response-wrap  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      <!-- <ng-container *ngFor=\"let item of userAnswerView;\">\n        <span>\n          {{item.label}},\n        </span>\n      </ng-container> -->\n      <form [formGroup]=\"form\" class=\"your-response-form\">\n        <ng-container\n          formArrayName=\"orders\"\n          *ngFor=\"let order of getFormArray().controls; let i = index\"\n        >\n          <span *ngIf=\"order.value === true\" class=\"optionlevel\">\n            {{ questionDetails1.choiceInteraction.simpleChoices[i].label }},\n          </span>\n        </ng-container>\n      </form>\n    </div>\n    <p\n      class=\"wkqp-prewrap wkqp-alert-success wkqp-success \"\n      *ngIf=\"!isUserAnswersCorrect()\"\n    >\n      <strong>Correct Response:</strong>\n      <ng-container *ngFor=\"let item of correctAns\">\n        <span class=\"optionlevel\"> {{ item.label }}, </span>\n      </ng-container>\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-response-wrap form.your-response-form,.medical-multiple-response-wrap strong.your-response-left{float:none;display:inline}"]
    })
], MedicalMultipleResponseComponent);
export { MedicalMultipleResponseComponent };
//# sourceMappingURL=data:application/json;base64, 