import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
import { ItemService } from '../item-service/item-service.service';
import { AssetPosition } from '../../../shared/models/index';
var InlineChoiceComponent = /** @class */ (function () {
    function InlineChoiceComponent(itemService) {
        this.itemService = itemService;
        this.count = 0;
        this.userAnswers = [];
        this.correctAnswers = [];
        this.assetPositions = AssetPosition;
    }
    Object.defineProperty(InlineChoiceComponent.prototype, "questionDetails", {
        get: function () {
            return this.questionDetails;
        },
        enumerable: true,
        configurable: true
    });
    InlineChoiceComponent.prototype.ngOnChanges = function (changes) {
        if (changes && changes.itemDetails && changes.itemDetails.currentValue) {
            this.count = 0;
            this.createQuestion();
        }
        if (this.isShowHide) {
            this.setUserAnswerAndCorrectanswer();
        }
        if (this.isClearAnswer) {
            this.clearAnswer();
        }
    };
    /* Init */
    InlineChoiceComponent.prototype.ngOnInit = function () { };
    InlineChoiceComponent.prototype.createQuestion = function () {
        this.correctOptions = [];
        this.promptTxt = this.itemDetails.promptText;
        this.assetData = this.itemDetails.assets;
        if (this.assetData.length !== 0) {
            this.assetPosition = this.itemDetails.assets[0]['assetsPosition'];
        }
        this.options = this.itemDetails.textEntryInteraction.inlineChoices;
        this.correctOptions = this.itemDetails.textEntryInteraction.inlineChoices
            ? this.itemDetails.textEntryInteraction.inlineChoices
            : [];
        this.correctOptions = this.correctOptions.map(function (item) {
            item = item.filter(function (subItem) { return subItem.correct; });
            return item;
        });
        this.questionTitleSplits = [];
        var promptText = this.itemDetails.promptText;
        var assetList = promptText.match(/≡Assets-[0-9]\d?≡/gi);
        if (assetList) {
            assetList.forEach(function (test) {
                if (promptText.indexOf(test) >= 0) {
                    promptText = promptText.replace(test, ' ' + test + ' ');
                }
            });
        }
        var reg = /(_{1,50})/g;
        promptText = promptText.replace(reg, ' ' + reg + ' ');
        var questionParts = promptText
            .replace(/[]{2,}/g, ' ')
            .trim()
            .split(' ');
        this.formatQuestionArray(questionParts);
    };
    /*
     *Splitting the questions parts to fetch out the the blanks and assets
     */
    InlineChoiceComponent.prototype.formatQuestionArray = function (questionParts) {
        var _this = this;
        questionParts.forEach(function (questionPart, index) {
            var i = index + 1;
            var ngModel = '';
            var reg = /(_{1,50})/g;
            var assetReg = /≡Assets-[0-9]\d?≡/g;
            if (reg.test(questionPart)) {
                _this.count++;
                _this.questionTitleSplits.push({
                    id: i,
                    name: "blank-" + _this.count,
                    isInputField: true,
                    ngModel: ngModel,
                    selectedItems: _this.formatUserAnswer(_this.options[_this.count - 1]),
                    list: _this.options[_this.count - 1],
                    count: _this.count - 1
                });
            }
            else if (assetReg.test(questionPart)) {
                _this.assetData.forEach(function (asset) {
                    if (asset.assetTextIdentifier === questionPart) {
                        var arr = [];
                        arr.push(asset);
                        _this.questionTitleSplits.push({
                            id: i,
                            name: questionPart,
                            isAsset: true,
                            assets: arr
                        });
                    }
                });
            }
            else {
                _this.questionTitleSplits.push({
                    id: i,
                    name: questionPart,
                    isText: true
                });
            }
        });
        this.validateUserAnswer();
    };
    /*
     *Validate user answer
     */
    InlineChoiceComponent.prototype.validateUserAnswer = function () {
        var choiceRef = this.questionTitleSplits.filter(function (data) {
            if (data.isInputField) {
                return data;
            }
        });
        var userAnswer = choiceRef
            .map(function (data) {
            if (data && data.selectedItems && data.selectedItems.length > 0) {
                return data.selectedItems;
            }
        })
            .flat(1);
        userAnswer = userAnswer.map(function (item) {
            if (item) {
                return item;
            }
        });
        var isCorrect = this.isCorrectAsnwer(choiceRef, userAnswer);
        var result = {
            userAnswer: userAnswer,
            correct: isCorrect
        };
        this.itemService.userAnswers = result;
        return result;
    };
    /*
     * To check the user entered answer is correct or not
     */
    InlineChoiceComponent.prototype.isCorrectAsnwer = function (choiceRef, userAnswer) {
        var isCorrect = false;
        var count = 0;
        choiceRef.forEach(function (element) {
            if (element) {
                element.list.forEach(function (data) {
                    if (data && data.correct) {
                        if (userAnswer.indexOf(data.choiceId) >= 0) {
                            count++;
                        }
                        else {
                            count = 0;
                            isCorrect = false;
                        }
                    }
                });
            }
        });
        if (userAnswer.length > 0 && count === userAnswer.length) {
            isCorrect = true;
        }
        return isCorrect;
    };
    /*
     *Format user anaswers(choiceId) to the required format
     */
    InlineChoiceComponent.prototype.formatUserAnswer = function (currentArray) {
        var resultArray = [];
        if (!this.itemDetails.userAttemptDetails.userAnswer) {
            return [];
        }
        var userAnswerArray = this.itemDetails.userAttemptDetails.userAnswer.map(function (x) { return +x; });
        if (userAnswerArray && userAnswerArray.length > 0) {
            resultArray = [];
            currentArray.forEach(function (element) {
                if (element && userAnswerArray.indexOf(element.choiceId) >= 0) {
                    resultArray.push(element.choiceId);
                }
            });
        }
        return resultArray;
    };
    /*
     *
     */
    InlineChoiceComponent.prototype.checkUserAnswerStatus = function () {
        var result = this.validateUserAnswer();
        if (result && result.correct) {
            return true;
        }
        return false;
    };
    InlineChoiceComponent.prototype.setUserAnswerAndCorrectanswer = function () {
        //Update user answer in service
        this.validateUserAnswer();
        /*
        Filtering the blanks object from the question splitted list
         */
        var choiceRef = this.questionTitleSplits.filter(function (data) {
            if (data.isInputField) {
                return data;
            }
        });
        /*
        Filtering correct answers from the blanks objects
         */
        this.correctAnswers = choiceRef.map(function (obj) {
            return obj.list.filter(function (el) {
                if (el.correct) {
                    return el.label;
                }
            });
        });
        /*
        Filtering user answers from the blanks objects
         */
        this.userAnswers = choiceRef
            .map(function (obj) {
            return obj.list.filter(function (el) {
                if (obj.selectedItems.indexOf(el.choiceId) >= 0) {
                    return el.label;
                }
            });
        })
            .flat(1);
    };
    /* When is clear answer valur became true then this function will be called */
    InlineChoiceComponent.prototype.clearAnswer = function () {
        this.questionTitleSplits.map(function (element) {
            if (element.isInputField) {
                element.selectedItems = [];
            }
            return element;
        });
        this.itemService.userAnswers = [];
    };
    InlineChoiceComponent.ctorParameters = function () { return [
        { type: ItemService }
    ]; };
    __decorate([
        Input()
    ], InlineChoiceComponent.prototype, "examEngineType", void 0);
    __decorate([
        Input()
    ], InlineChoiceComponent.prototype, "canShowMetadata", void 0);
    __decorate([
        Input()
    ], InlineChoiceComponent.prototype, "isClearAnswer", void 0);
    __decorate([
        Input()
    ], InlineChoiceComponent.prototype, "isShowHide", void 0);
    __decorate([
        Input()
    ], InlineChoiceComponent.prototype, "imagePath", void 0);
    __decorate([
        Input()
    ], InlineChoiceComponent.prototype, "checkQuizSubmission", void 0);
    __decorate([
        Input()
    ], InlineChoiceComponent.prototype, "preferredTextFormat", void 0);
    __decorate([
        Input('questionDetails')
    ], InlineChoiceComponent.prototype, "itemDetails", void 0);
    InlineChoiceComponent = __decorate([
        Component({
            selector: 'inline-choice',
            template: "<!-- ######################### QP Exam Engine Type #############################-->\n<ng-container *ngIf=\"examEngineType == 'QP' || examEngineType == 'NCLEX'\">\n  <div class=\"wk-row\">\n    <media-carousel\n      *ngIf=\"\n        itemDetails.assets &&\n        itemDetails.assets.length != 0 &&\n        assetPosition != assetPositions.bottom &&\n        assetPosition != assetPositions.withInText\n      \"\n      [imagePath]=\"imagePath\"\n      [assetData]=\"assetData\"\n      [assetsPosition]=\"assetPosition\"\n    ></media-carousel>\n\n    <div\n      [ngClass]=\"{\n        'wk-col-8':\n          itemDetails.assets != undefined &&\n          itemDetails.assets.length != 0 &&\n          assetPosition != assetPositions.withInText,\n        'wk-col-12':\n          itemDetails.assets == undefined ||\n          itemDetails.assets.length == 0 ||\n          assetPosition == assetPositions.withInText,\n        'right-assets-position-question': assetPosition == assetPositions.right,\n        'left-assets-position-question': assetPosition == assetPositions.left,\n        'top-assets-position-question': assetPosition == assetPositions.top,\n        'bottom-assets-position-question':\n          assetPosition == assetPositions.bottom\n      }\"\n    >\n      <div class=\"wkqp-layout-item\">\n        <div class=\"wkqp-field-item normal-font mb0 \">\n          <div class=\"wkqp-field-header\">\n            <div class=\"mb20 normal-font wkqp-prewrap\">\n              <!-- <select-type-configuration [questionCurrentData]=\"itemDetails\" [options]=\"options\" [promptTxt]=\"promptTxt\" (valueChanged)='valueChanged($event)'></select-type-configuration> -->\n              <form>\n                <div>\n                  <ng-container\n                    *ngFor=\"\n                      let questionTitle of questionTitleSplits;\n                      let i = index\n                    \"\n                    [class.choose-option-top10]=\"\n                      questionTitle.isInputField && examEngineType == 'NCLEX'\n                    \"\n                  >\n                    <ng-container *ngIf=\"questionTitle.isInputField\">\n                      <span>\n                        <mat-select\n                          class=\"inline-choice-select-box-main\"\n                          multiple\n                          [(ngModel)]=\"questionTitle.selectedItems\"\n                          name=\"{{ questionTitle.id }}\"\n                          (selectionChange)=\"setUserAnswerAndCorrectanswer()\"\n                          placeholder=\"Choose Answer..\"\n                        >\n                          <mat-option\n                            *ngFor=\"let option of questionTitle.list\"\n                            [value]=\"option.choiceId\"\n                            >{{ option.label }}</mat-option\n                          >\n                        </mat-select>\n                      </span>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"questionTitle.isAsset\">\n                      <div style=\"padding-top: 20px;\" class=\"wk-row\">\n                        <media-carousel\n                          [inline]=\"'inline'\"\n                          [assetData]=\"questionTitle.assets\"\n                        ></media-carousel>\n                      </div>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"questionTitle.isText\">\n                      {{ questionTitle.name }}\n                    </ng-container>\n                  </ng-container>\n                  <span class=\"color-red fs-1rem\"> </span>\n                </div>\n                <button\n                  hidden\n                  id=\"resetBtn\"\n                  type=\"reset\"\n                  value=\"reset\"\n                ></button>\n              </form>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <media-carousel\n        *ngIf=\"\n          itemDetails.assets &&\n          itemDetails.assets.length != 0 &&\n          assetPosition == assetPositions.bottom\n        \"\n        [imagePath]=\"imagePath\"\n        [assetData]=\"assetData\"\n        [assetsPosition]=\"assetPosition\"\n      ></media-carousel>\n      <div *ngIf=\"canShowMetadata && isShowHide != true\">\n        <lib-metadata [itemData]=\"itemDetails\"></lib-metadata>\n      </div>\n      <!-- User answer and correct answer block-->\n      <ng-container *ngIf=\"isShowHide == true\">\n        <div\n          class=\"m-b-20\"\n          [ngClass]=\"\n            checkUserAnswerStatus()\n              ? 'wkqp-alert-success wkqp-success'\n              : 'wkqp-alert-danger wkqp-danger'\n          \"\n          *ngIf=\"userAnswers.length > 0\"\n        >\n          <strong>Your Response: </strong>\n          <ng-container>\n            <ng-container *ngFor=\"let blank of userAnswers; let i = index\">\n              <span\n                >{{ blank.label\n                }}{{ i === userAnswers.length - 1 ? '' : ',' }}</span\n              >\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <div\n          class=\"wkqp-alert-success wkqp-success badge-normal mb20\"\n          *ngIf=\"!checkUserAnswerStatus()\"\n        >\n          <strong>Correct Response:</strong>\n          <table\n            class=\"table table-bordered m-t-20\"\n            *ngIf=\"!checkUserAnswerStatus()\"\n          >\n            <tbody>\n              <tr *ngFor=\"let blanks of correctOptions; let i = index\">\n                <td width=\"10%\" class=\"table-label\">\n                  <strong>Blank-{{ i + 1 }}</strong>\n                </td>\n                <td width=\"90%\">\n                  <span\n                    class=\"wkqp-badge\"\n                    *ngFor=\"let choice of blanks; let k = index\"\n                    style=\"margin-left: 5px\"\n                    libGetFormatText\n                    [preferredTextFormat]=\"preferredTextFormat\"\n                    [plainText]=\"choice.label\"\n                    [richText]=\"choice.richLabel\"\n                  >\n                  </span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"common-full-width mb20\" *ngIf=\"canShowMetadata\">\n          <lib-metadata [itemData]=\"itemDetails\"></lib-metadata>\n        </div>\n      </ng-container>\n      <div class=\"common-full-width mb20\" *ngIf=\"isShowHide == true\">\n        <lib-rationale\n          [itemData]=\"itemDetails.modelFeedback\"\n          [preferredTextFormat]=\"preferredTextFormat\"\n        ></lib-rationale>\n\n        <lib-remediation\n          [itemData]=\"itemDetails.remediationLinks\"\n          [preferredTextFormat]=\"preferredTextFormat\"\n        ></lib-remediation>\n      </div>\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      *ngIf=\"\n        itemDetails.assets &&\n        itemDetails.assets.length != 0 &&\n        assetPosition != assetPositions.bottom &&\n        assetPosition != assetPositions.withInText\n      \"\n      [imagePath]=\"imagePath\"\n      [assetData]=\"assetData\"\n      [assetsPosition]=\"assetPosition\"\n    ></media-carousel>\n\n    <div\n      [ngClass]=\"{\n        'wk-col-8':\n          itemDetails.assets != undefined &&\n          itemDetails.assets.length != 0 &&\n          assetPosition != assetPositions.withInText,\n        'wk-col-12':\n          itemDetails.assets == undefined ||\n          itemDetails.assets.length == 0 ||\n          assetPosition == assetPositions.withInText,\n        'right-assets-position-question': assetPosition == assetPositions.right,\n        'left-assets-position-question': assetPosition == assetPositions.left,\n        'top-assets-position-question': assetPosition == assetPositions.top,\n        'bottom-assets-position-question':\n          assetPosition == assetPositions.bottom\n      }\"\n    >\n      <div class=\"wkqp-layout-item\">\n        <div class=\"wkqp-field-item normal-font mb0 \">\n          <div class=\"wkqp-field-header\">\n            <div class=\"mb20 normal-font wkqp-prewrap\">\n              <div>\n                <span\n                  *ngFor=\"\n                    let questionTitle of questionTitleSplits;\n                    let i = index\n                  \"\n                >\n                  <ng-container *ngIf=\"questionTitle.isInputField\">\n                    <ng-multiselect-dropdown\n                      ngDefaultControl\n                      [ngModelOptions]=\"{ standalone: true }\"\n                      [placeholder]=\"'Choose Option'\"\n                      [data]=\"questionTitle.list\"\n                      [(ngModel)]=\"questionTitle.selectedItems\"\n                    >\n                      >\n                    </ng-multiselect-dropdown>\n                  </ng-container>\n                  <ng-container *ngIf=\"questionTitle.isAsset\">\n                    <div style=\"padding-top: 20px;\" class=\"wk-row\">\n                      <media-carousel\n                        [inline]=\"'inline'\"\n                        [assetData]=\"questionTitle.assets\"\n                      ></media-carousel>\n                    </div>\n                  </ng-container>\n\n                  <ng-container *ngIf=\"questionTitle.isText\">\n                    {{ questionTitle.name }}\n                  </ng-container>\n                </span>\n                <span class=\"color-red fs-1rem\"> </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <media-carousel\n        *ngIf=\"\n          itemDetails.assets &&\n          itemDetails.assets.length != 0 &&\n          assetPosition == assetPositions.bottom\n        \"\n        [imagePath]=\"imagePath\"\n        [assetData]=\"assetData\"\n        [assetsPosition]=\"assetPosition\"\n      ></media-carousel>\n      <!-- User answer and correct answer block-->\n      <ng-container *ngIf=\"checkQuizSubmission == true\">\n        <div\n          [ngClass]=\"\n            checkUserAnswerStatus()\n              ? 'wkqp-alert-success wkqp-success'\n              : 'wkqp-alert-danger wkqp-danger'\n          \"\n          *ngIf=\"userAnswers.length !== 0\"\n        >\n          <strong>Your Response:</strong>\n          <ng-container *ngFor=\"let blank of userAnswers; let i = index\">\n            <span\n              *ngFor=\"let choice of blank; let k = index\"\n              style=\"margin-left: 5px\"\n              >{{ choice.label\n              }}{{\n                i === userAnswers.length - 1 && k === blank.length - 1\n                  ? ''\n                  : ','\n              }}</span\n            >\n          </ng-container>\n        </div>\n\n        <div\n          class=\"wkqp-alert-success wkqp-success \"\n          *ngIf=\"!checkUserAnswerStatus()\"\n        >\n          <strong>Correct Response:</strong>\n          <table class=\"table table-bordered\" *ngIf=\"!checkUserAnswerStatus()\">\n            <tbody>\n              <tr *ngFor=\"let blanks of correctOptions; let i = index\">\n                <td width=\"15%\" style=\"color: #000\">\n                  <strong>Blank-{{ i + 1 }}</strong>\n                </td>\n                <td width=\"85%\">\n                  <span\n                    class=\"wkqp-badge\"\n                    *ngFor=\"let choice of blanks; let k = index\"\n                    style=\"margin-left: 5px\"\n                    >{{ choice.label }}\n                  </span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n\n        <p *ngIf=\"itemDetails.modelFeedback[0].length !== 0\">\n          <strong>Rationale:</strong>\n          <span>{{ itemDetails.modelFeedback[0].feedbackText }}</span>\n        </p>\n        <div *ngIf=\"itemDetails.remediationLinks.length !== 0\">\n          <strong>Remediation:</strong>\n          <div\n            *ngFor=\"\n              let Remediation of itemDetails.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    </div>\n  </div>\n</ng-container>\n",
            styles: [".dropdown-list{margin-top:0!important}.choose-option-top10{position:relative;top:10px}.table-label{color:#000!important}.m-b-20{margin-bottom:20px!important}.m-t-20{margin-top:20px!important}.badge-normal table tr td span.wkqp-badge{font-style:normal}.badge-normal table tr td.table-label strong{color:#474747;font-size:.9375rem;font-style:normal}.ques-num-content{margin-top:4px;display:inline-block;vertical-align:middle}"]
        })
    ], InlineChoiceComponent);
    return InlineChoiceComponent;
}());
export { InlineChoiceComponent };
//# sourceMappingURL=data:application/json;base64, 