import { __decorate, __extends } from "tslib";
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { SharedService } from '../../../../shared/service/shared.service';
import { SummaryBase } from '../summary-base';
import { UserAnswerTypes } from '../../../../shared/models/index';
var InlineChoiceSummaryComponent = /** @class */ (function (_super) {
    __extends(InlineChoiceSummaryComponent, _super);
    function InlineChoiceSummaryComponent(sharedService) {
        var _this = _super.call(this, sharedService) || this;
        _this.sharedService = sharedService;
        _this.userAnswerTypes = UserAnswerTypes;
        return _this;
    }
    InlineChoiceSummaryComponent.prototype.ngOnChanges = function (changes) {
        if (this.question) {
            this.createQuestion();
            this.setUserAnswer();
        }
    };
    InlineChoiceSummaryComponent.prototype.ngOnInit = function () {
        this.convertedTime = this.convertTime2(this.question.questionTimeSpent, 'time');
    };
    InlineChoiceSummaryComponent.prototype.createQuestion = function () {
        var _this = this;
        var options = this.question.textEntryInteraction.inlineChoices;
        var count = 0;
        var promptText = this.question.promptText;
        var assetData = this.question.assets;
        for (var i = 0; i <= 4; i++) {
            var test = '≡Assets-' + (i + 1) + '≡';
            if (promptText.indexOf(test) >= 0) {
                promptText = promptText.replace(test, ' ≡Assets-' + (i + 1) + '≡ ');
            }
        }
        var reg = /(_{1,50})/g;
        promptText = promptText.replace(reg, ' ' + reg + ' ');
        var questionParts = promptText
            .replace(/[]{2,}/g, ' ')
            .trim()
            .split(' ');
        this.questionTitleSplits = [];
        questionParts.forEach(function (questionPart, index) {
            var i = index + 1;
            var ngModel = '';
            var reg = /(_{1,50})/g;
            var assetReg = /≡Assets-1≡|≡Assets-2≡|≡Assets-3≡/g;
            if (reg.test(questionPart)) {
                count++;
                _this.questionTitleSplits.push({
                    id: i,
                    name: "blank-" + count,
                    isInputField: true,
                    list: options[count - 1],
                    count: count - 1
                });
            }
            else if (assetReg.test(questionPart)) {
                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
                });
            }
        });
    };
    InlineChoiceSummaryComponent.prototype.setUserAnswer = function () {
        /*
        Filtering the blanks object from the question splitted list
         */
        var choiceRef = this.questionTitleSplits.filter(function (data) {
            if (data.isInputField) {
                return data;
            }
        });
        var userAnswer = this.question.userResponse;
        /*
        Filtering user answers from the blanks objects
         */
        this.userAnswer = choiceRef
            .map(function (obj) {
            return obj.list.filter(function (el) {
                if (userAnswer.indexOf(String(el.choiceId)) >= 0) {
                    return el.label;
                }
            });
        })
            .flat(1);
    };
    InlineChoiceSummaryComponent.ctorParameters = function () { return [
        { type: SharedService }
    ]; };
    __decorate([
        Input('summaryData')
    ], InlineChoiceSummaryComponent.prototype, "question", void 0);
    InlineChoiceSummaryComponent = __decorate([
        Component({
            selector: 'lib-inline-choice-summary',
            template: "<ng-container *ngIf=\"question.itemType == 24\">\n  <div class=\"wk-row\">\n    <media-carousel\n      [imagePath]=\"question.assets[0].assetPath\"\n      [assetData]=\"question.assets\"\n      [assetsPosition]=\"question.assetsPosition\"\n      *ngIf=\"\n        question &&\n        question.assets &&\n        question.assets.length != 0 &&\n        question.assets != undefined &&\n        question.assetsPosition != AssetPositionValuesEnum.withInText &&\n        question.assetsPosition != AssetPositionValuesEnum.bottom\n      \"\n    ></media-carousel>\n    <div\n      [ngClass]=\"{\n        'wk-col-8 asset-left-width66':\n          question &&\n          question.assets != undefined &&\n          question.assets.length != 0 &&\n          question.assetsPosition != AssetPositionValuesEnum.withInText,\n        'wk-col-12':\n          (question && question.assets == undefined) ||\n          (question && question.assets.length == 0) ||\n          (question &&\n            question.assetsPosition == AssetPositionValuesEnum.withInText),\n        'right-assets-position-question':\n          question &&\n          question.assets != undefined &&\n          question.assets.length != 0 &&\n          question.assetsPosition == AssetPositionValuesEnum.right,\n        'left-assets-position-question':\n          question &&\n          question.assets != undefined &&\n          question.assets.length != 0 &&\n          question.assetsPosition == AssetPositionValuesEnum.left,\n        'top-assets-position-question':\n          question &&\n          question.assets != undefined &&\n          question.assets.length != 0 &&\n          question.assetsPosition == AssetPositionValuesEnum.top,\n        'bottom-assets-position-question':\n          question &&\n          question.assets != undefined &&\n          question.assets.length != 0 &&\n          question.assetsPosition == AssetPositionValuesEnum.bottom\n      }\"\n    >\n      <div class=\"wkqp-layout-item mb20 summary4-mb0 \">\n        <div class=\"wkqp-field-item summary5-mb0 common-full-width \">\n          <div class=\"wk-row gray-bg-result mb20\">\n            <div class=\"wk-col-8 responsive-pl15\">\n              <!--Question sequence-->\n              <span class=\"wkqb-question-number\">\n                <strong>{{ question.sequence }}</strong>\n              </span>\n              <!--Question prompt text-->\n              <span\n                class=\"qp-ts-number-right\"\n                *ngIf=\"\n                  question.assetsPosition != AssetPositionValuesEnum.withInText\n                \"\n              >\n                <span class=\"wkqp-prewrap inline-choice-ques-wrapper\">\n                  <span\n                    class=\"ques-num-content\"\n                    *ngFor=\"\n                      let questionTitle of questionTitleSplits;\n                      let i = index\n                    \"\n                  >\n                    <ng-container *ngIf=\"questionTitle.isInputField\">\n                      <mat-select\n                        placeholder=\"Choose Answer..\"\n                        class=\"inline-choice-select-box-main\"\n                        multiple\n                      >\n                        <mat-option\n                          disabled\n                          *ngFor=\"let option of questionTitle.list\"\n                          [value]=\"option.choiceId\"\n                          >{{ option.label }}</mat-option\n                        >\n                      </mat-select>\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                  </span>\n                </span>\n              </span>\n              <span\n                *ngIf=\"\n                  question.assetsPosition == AssetPositionValuesEnum.withInText\n                \"\n              >\n                <item-text-assets\n                  [promptText]=\"question.promptText\"\n                  [assetData]=\"question.assets\"\n                  [assetsPosition]=\"AssetPositionValuesEnum.withInText\"\n                ></item-text-assets>\n              </span>\n            </div>\n            <media-carousel\n              [imagePath]=\"question.assets[0].assetPath\"\n              [assetData]=\"question.assets\"\n              [assetsPosition]=\"question.assetsPosition\"\n              *ngIf=\"\n                question &&\n                question.assets &&\n                question.assets.length != 0 &&\n                question.assets != undefined &&\n                question.assetsPosition != AssetPositionValuesEnum.withInText &&\n                question.assetsPosition == AssetPositionValuesEnum.bottom\n              \"\n            ></media-carousel>\n            <!--Question Time spent-->\n            <div class=\"wk-col-4 responsive-timespent time-qu-pt-remove\">\n              <span\n                class=\"que-mob-left mr10\"\n                [ngClass]=\"getQuestionProgressClass(question)\"\n              ></span>\n              <span\n                class=\"wkqp-badge time-mob-right\"\n                [ngClass]=\"getOvertimelimitClass(question)\"\n              >\n                Time spent -\n                {{ convertedTime }}</span\n              >\n            </div>\n          </div>\n\n          <div\n            class=\"common-full-width\"\n            *ngIf=\"\n              question.userResponse &&\n              question.userResponse != null &&\n              question.userResponse.length > 0\n            \"\n          >\n            <!--Your Response-->\n            <ng-container>\n              <p\n                class=\"wkqp-prewrap response-mb20\"\n                [ngClass]=\"getSelectedResponseClass(question)\"\n              >\n                <strong>Your Response: </strong>\n                <ng-container\n                  *ngIf=\"question.isCorrect !== userAnswerTypes.UnAttempted\"\n                >\n                  <span *ngFor=\"let blank of userAnswer; let i = index\">\n                    {{ blank.label\n                    }}{{ i === userAnswer.length - 1 ? '' : ',' }}\n                  </span>\n                </ng-container>\n              </p>\n            </ng-container>\n            <ng-container\n              *ngIf=\"question.isCorrect == userAnswerTypes.Incorrect\"\n            >\n              <div\n                class=\"wkqp-alert-success wkqp-prewrap wkqp-success  badge-normal mb20\"\n              >\n                <strong>Correct Response: </strong>\n                <table\n                  class=\"table table-bordered wkqp-table wkqp-table-permit-overflow correct-inline-text\"\n                >\n                  <tbody>\n                    <tr\n                      *ngFor=\"\n                        let blanks of question.textEntryInteraction\n                          .inlineChoices;\n                        let blankNum = index\n                      \"\n                    >\n                      <td width=\"10%\" class=\"table-label\">\n                        <strong>Blank-{{ blankNum + 1 }}</strong>\n                      </td>\n                      <td\n                        *ngIf=\"question.labelText == 'INLINE_CHOICE'\"\n                        width=\"90%\"\n                      >\n                        <span\n                          class=\"wkqp-badge\"\n                          *ngFor=\"let choice of blanks; let choiceNum = index\"\n                          [hidden]=\"choice.correct !== true\"\n                        >\n                          <span *ngIf=\"choice.correct === true\">{{\n                            choice.label\n                          }}</span>\n                        </span>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container>\n          </div>\n\n          <!--Unattempted Response-->\n          <ng-container\n            *ngIf=\"question.isCorrect == userAnswerTypes.UnAttempted\"\n          >\n            <div class=\"common-full-width\">\n              <p class=\"wkqp-alert-danger\">\n                <strong>You did not answer this question</strong>\n              </p>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n    <div class=\"common-full-width mb20\">\n      <!--Rationale-->\n      <lib-rationale [itemData]=\"question.modelFeedback\"></lib-rationale>\n      <!-- remediation -->\n      <lib-remediation [itemData]=\"question.remediationLinks\"></lib-remediation>\n    </div>\n  </div>\n</ng-container>\n",
            changeDetection: ChangeDetectionStrategy.OnPush,
            styles: [".inline-choice-ques-wrapper span{float:left;padding-right:4px;white-space:normal}.wkqb-question-number{margin-top:4px;display:inline-block}.ques-num-content{margin-top:4px;display:inline-block;vertical-align:middle}.wkqp-unattempted{top:0}.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}"]
        })
    ], InlineChoiceSummaryComponent);
    return InlineChoiceSummaryComponent;
}(SummaryBase));
export { InlineChoiceSummaryComponent };
//# sourceMappingURL=data:application/json;base64, 