import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
import { ItemService } from '../item-service/item-service.service';
let FillInTheBlanksComponent = class FillInTheBlanksComponent {
    constructor(itemService) {
        this.itemService = itemService;
        // Declare the variables
        this.userAnswer = [];
        this.correctAns = [];
        this.userAttemptDetails = [];
        this.assetData = [];
        this.questionTitleSplits = [];
        this.count = 0;
        this.correctOptions = [];
        this.options = [];
        this.selectBoxes = [];
        this.questionDetails1 = [];
        this.assetPosition = [];
        this.tempSelectedItems = [];
        this.showResponse = false;
        this.imagePath = [];
    }
    get questionDetails() {
        return this.questionDetails;
    }
    set questionCurrentData(value) {
        if (value) {
            this.questionDetails1 = value;
            this.count = 0;
            this.userAnswer = [];
            this.selectBoxes = [];
            this.createQuestion();
        }
        else {
            this.questionDetails1 = [];
            this.count = 0;
            this.createQuestion();
        }
    }
    /* Init */
    ngOnInit() {
        this.itemService.userAnswerState.subscribe(answer => (this.userAnswerService = answer));
    }
    /* Do Check */
    ngDoCheck() {
        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;
        }
    }
    /* function to get correct answer */
    correctAnswer() {
        for (const i of this.questionDetails1.textEntryInteraction.inlineChoices) {
            this.correctAns.push(i);
        }
    }
    /* check the value changed */
    valueChanged(event) {
        if (event.length === 0) {
            this.userAnswer = [];
            this.tempSelectedItems = [];
        }
        else {
            this.userAnswer = event;
            this.tempSelectedItems = event;
        }
        if (this.userAnswer.length !== 0) {
            const checkAttempt = event.find(item => item !== '');
            if (checkAttempt === undefined) {
                this.showResponse = true;
            }
            const answerObj = checkAttempt === undefined && this.userAnswer.length !== 0
                ? []
                : 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() {
        const userAnswers = [];
        this.questionTitleSplits.forEach(element => {
            if (element.isInputField) {
                userAnswers.push(element.ngModel);
            }
        });
        const correctAnswers = this.correctOptions.length > 0 ? this.correctOptions : [];
        let result = false;
        if (!userAnswers ||
            userAnswers.length === 0 ||
            userAnswers[0] instanceof Array ||
            userAnswers.length != correctAnswers.length) {
            return result;
        }
        else {
            for (let i = 0; i < correctAnswers.length; i++) {
                if (userAnswers[i] &&
                    correctAnswers[i] &&
                    correctAnswers[i].indexOf(userAnswers[i].toLowerCase().trim()) >= 0) {
                    result = true;
                }
                else {
                    result = false;
                    break;
                }
            }
            return result;
        }
    }
    /* function to clear user inputs */
    clearUserInputs() {
        this.userAnswer = [];
        this.selectBoxes = [];
        this.tempSelectedItems = [];
        document.getElementById('resetBtn').click();
    }
    /* Setting prevalue */
    settingPreValue() {
        if (this.userAnswer.length === 0 &&
            this.questionDetails1.userAttemptDetails.userAnswer.length !== 0) {
            this.userAnswer = this.questionDetails1.userAttemptDetails.userAnswer;
        }
        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);
        }
    }
    createQuestion() {
        this.assetData = this.questionDetails1.assets;
        this.userAnswer = [];
        this.itemService.userAnswerMethod([]);
        this.itemService.validateAnswerValueMethod(false);
        if (this.assetData.length !== 0) {
            this.assetPosition = this.questionDetails1.assets[0]['assetsPosition'];
        }
        this.correctOptions = this.questionDetails1['textEntryInteraction']['inlineChoices'];
        let preValue = [];
        this.selectBoxes = [];
        this.tempSelectedItems = [];
        if (this.questionDetails1.userAttemptDetails.userAnswer.length !== 0 &&
            this.questionDetails1.userAttemptDetails.userAnswer[0] !== 'null') {
            preValue = this.questionDetails1.userAttemptDetails.userAnswer.map(String);
            this.selectBoxes = preValue;
            this.tempSelectedItems = preValue;
        }
        else {
            for (let i = 0; i < this.correctOptions.length; i++) {
                preValue.push('');
            }
        }
        this.questionTitleSplits = [];
        let promptText = this.questionDetails1['promptText'];
        const assetList = promptText.match(/≡Assets-[0-9]\d?≡/gi);
        if (assetList) {
            assetList.forEach((test) => {
                if (promptText.indexOf(test) >= 0) {
                    promptText = promptText.replace(test, ' ' + test + ' ');
                }
            });
        }
        const reg = /(_{5,50})/g;
        promptText = promptText.replace(reg, ' ~input~ ');
        const questionParts = promptText
            .replace(/[]{2,}/g, ' ')
            .trim()
            .split(' ');
        questionParts.forEach((questionPart, index) => {
            const i = index + 1;
            const ngModel = [];
            const reg = /(_{5,50})/g;
            const assetReg = /≡Assets-[0-9]\d?≡/g;
            if (questionPart == '~input~') {
                this.count++;
                this.questionTitleSplits.push({
                    id: i,
                    name: `blank-${this.count}`,
                    isInputField: true,
                    ngModel: this.getCurrentAnswer(preValue),
                    count: this.count - 1
                });
            }
            else if (assetReg.test(questionPart)) {
                this.assetData.forEach(asset => {
                    if (asset.assetTextIdentifier === questionPart) {
                        let arr = [];
                        arr.push(asset);
                        // this.questionTitleSplits.push(arr);
                        this.questionTitleSplits.push({
                            id: i,
                            name: questionPart,
                            isAsset: true,
                            assets: arr
                        });
                    }
                });
            }
            else {
                this.questionTitleSplits.push({
                    id: i,
                    name: questionPart,
                    isText: true
                });
            }
        });
        this.valueChanged(preValue);
    }
    getCurrentAnswer(preValue) {
        if (preValue.length > 0) {
            if (preValue[0] && preValue[0] !== 'null') {
                return preValue[this.count - 1];
            }
            return [];
        }
        return [];
    }
    onInputFieldChange(option, index) {
        const selectedItemObj = option['ngModel'];
        this.tempSelectedItems[index] = selectedItemObj;
        this.selectBoxes = this.tempSelectedItems;
        this.valueChanged(this.selectBoxes);
    }
    validateUserInput(event, questionTitle) {
        if (questionTitle &&
            questionTitle['ngModel'] &&
            questionTitle['ngModel'].length === 0 &&
            event.which === 32) {
            return false;
        }
    }
};
FillInTheBlanksComponent.ctorParameters = () => [
    { type: ItemService }
];
__decorate([
    Input('questionDetails')
], FillInTheBlanksComponent.prototype, "questionCurrentData", null);
__decorate([
    Input()
], FillInTheBlanksComponent.prototype, "examEngineType", void 0);
__decorate([
    Input()
], FillInTheBlanksComponent.prototype, "isClearAnswer", void 0);
__decorate([
    Input()
], FillInTheBlanksComponent.prototype, "isShowHide", void 0);
__decorate([
    Input()
], FillInTheBlanksComponent.prototype, "imagePath", void 0);
__decorate([
    Input()
], FillInTheBlanksComponent.prototype, "checkQuizSubmission", void 0);
__decorate([
    Input()
], FillInTheBlanksComponent.prototype, "selectedTheme", void 0);
__decorate([
    Input()
], FillInTheBlanksComponent.prototype, "fontSize", void 0);
__decorate([
    Input()
], FillInTheBlanksComponent.prototype, "canShowMetadata", void 0);
__decorate([
    Input()
], FillInTheBlanksComponent.prototype, "preferredTextFormat", void 0);
FillInTheBlanksComponent = __decorate([
    Component({
        selector: 'fill-in-the-blanks',
        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 fill-in-the-blank-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\">\n            <div class=\"mb20 normal-font\">\n              <form>\n                <div class=\"fill-in-the-blanks-ques-wrapper\">\n                  <ng-container\n                    *ngFor=\"\n                      let questionTitle of questionTitleSplits;\n                      let i = index\n                    \"\n                  >\n                    <ng-container *ngIf=\"questionTitle.isInputField\">\n                      <span>\n                        <input\n                          type=\"text\"\n                          name=\"{{ questionTitle.name }}\"\n                          class=\"wk-fill-inthe-blank-text\"\n                          (keyup)=\"\n                            onInputFieldChange(\n                              questionTitle,\n                              questionTitle.count\n                            )\n                          \"\n                          (keydown)=\"validateUserInput($event, questionTitle)\"\n                          [(ngModel)]=\"questionTitleSplits[i].ngModel\"\n                        />\n                      </span>\n                    </ng-container>\n                    <ng-container *ngIf=\"questionTitle.isAsset\">\n                      <div class=\"mb20\">\n                        <div class=\"wk-row\">\n                          <media-carousel\n                            [inline]=\"'inline'\"\n                            [assetData]=\"questionTitle.assets\"\n                          ></media-carousel>\n                        </div>\n                      </div>\n                    </ng-container>\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          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 *ngIf=\"canShowMetadata && message != true\">\n        <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n      </div>\n      <!-- Your 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          <ng-container *ngFor=\"let blanks of userAnswer; let i = index\">\n            <span\n              >{{ blanks ? blanks : 'No Response'\n              }}{{ i === userAnswer.length - 1 ? '' : ',' }}</span\n            >\n          </ng-container>\n        </p>\n\n        <div\n          class=\"wkqp-prewrap wkqp-alert-success wkqp-success  mb20 badge-normal\"\n          *ngIf=\"!isUserAnswersCorrect()\"\n        >\n          <strong>Correct Response: </strong>\n          <table class=\"table table-bordered m-t-20\">\n            <tbody>\n              <tr\n                *ngFor=\"\n                  let blanks of questionDetails1.textEntryInteraction\n                    .inlineChoices;\n                  let i = index\n                \"\n              >\n                <td width=\"10%\" class=\"ans-response\">\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                  >\n                    {{ choice }}\n                  </span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\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\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      *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\">\n            <div class=\"mb20 normal-font wkqp-prewrap\">\n              <!-- <input-type-configuration [userAttemptDetails]=\"userAttemptDetails\" [promptTxt]=\"promptTxt\" (valueChanged)='valueChanged($event)'>\n              </input-type-configuration> -->\n              <form>\n                <div>\n                  <span\n                    *ngFor=\"\n                      let questionTitle of questionTitleSplits;\n                      let i = index\n                    \"\n                  >\n                    <ng-container *ngIf=\"questionTitle.isInputField\">\n                      <input\n                        type=\"text\"\n                        name=\"{{ questionTitle.name }}\"\n                        class=\"wk-fill-inthe-blank-text\"\n                        (keyup)=\"\n                          onInputFieldChange(questionTitle, questionTitle.count)\n                        \"\n                        (keydown)=\"validateUserInput($event, questionTitle)\"\n                        [(ngModel)]=\"questionTitleSplits[i].ngModel\"\n                      />\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\">\n                    <!-- {{invalidMessage}} -->\n                  </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          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      <!--User answer and correct answer-->\n      <ng-container *ngIf=\"checkQuizSubmission == true\">\n        <!-- {{userAnswer}}   {{showResponse}} -->\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          <ng-container *ngFor=\"let blanks of userAnswer; let i = index\">\n            <span\n              >{{ blanks ? blanks : 'No Response'\n              }}{{ i === userAnswer.length - 1 ? '' : ',' }}</span\n            >\n          </ng-container>\n        </p>\n\n        <div\n          class=\"wkqp-prewrap wkqp-alert-success wkqp-success \"\n          *ngIf=\"!isUserAnswersCorrect()\"\n        >\n          <strong>Correct Response: </strong>\n          <table class=\"table table-bordered \" style=\"margin-top: 20px;\">\n            <tbody>\n              <tr\n                *ngFor=\"\n                  let blanks of questionDetails1.textEntryInteraction\n                    .inlineChoices;\n                  let i = index\n                \"\n              >\n                <td width=\"15%\" class=\"ans-response\">\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                  >\n                    {{ choice }}\n                  </span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n        <div *ngIf=\"canShowMetadata\">\n          <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n        </div>\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    </div>\n  </div>\n</ng-container>\n",
        styles: [".ans-response{color:#000!important}.m-b-20{margin-bottom:20px!important}.m-t-20{margin-top:20px!important}.wkqp-field-item input.wk-fill-inthe-blank-text{width:20%;border-bottom:1px solid #474747;border-top:none;border-right:none;border-left:none;background-color:transparent;padding:0;height:2rem}.wkqp-field-item input.wk-fill-inthe-blank-text:focus{border-color:#474747;outline:0}.wkqp-field-item input.wk-fill-inthe-blank-text:hover{border-color:#474747}input.wk-fill-inthe-blank-text{border-bottom:1px solid #909090!important;border-top:none!important;border-right:none!important;border-left:none!important;background-color:transparent!important;padding:0!important;height:2rem!important;margin-bottom:20px;color:var(--text-color)}.leave-space{margin:2px}.fill-in-the-blank-right-wk-col-8{width:64%!important;padding:0}.badge-normal table tr td span.wkqp-badge{font-style:normal}.badge-normal table tr td.ans-response strong{color:#474747;font-size:.9375rem;font-style:normal}"]
    })
], FillInTheBlanksComponent);
export { FillInTheBlanksComponent };
//# sourceMappingURL=data:application/json;base64, 