import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
import { ItemService } from '../item-service/item-service.service';
import { DomSanitizer } from '@angular/platform-browser';
import { QuizService } from '../../../shared/service/quiz.service';
let FigureLabelingComponent = class FigureLabelingComponent {
    constructor(itemService, _DomSanitizationService, quizService) {
        this.itemService = itemService;
        this._DomSanitizationService = _DomSanitizationService;
        this.quizService = quizService;
        // Declare the variables
        this.userAnswer = [];
        this.assetData = [];
        this.duplicateKeyValue = false;
        this.questionDetails1 = [];
        this.hasAnswered = false;
        this.duplicatePresent = -1;
        this.duplicateIndexes = [];
        this.imagePath = [];
    }
    get questionDetails() {
        return this.questionDetails;
    }
    set questionCurrentData(value) {
        if (value) {
            this.questionDetails1 = value;
            this.userAnswer = [];
            this.correctOptions = [];
            this.createQuestion();
        }
        else {
            this.questionDetails1 = [];
            this.userAnswer = [];
            this.createQuestion();
        }
    }
    /* init */
    ngOnInit() { }
    ngOnChanges(changes) { }
    /* 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;
        }
    }
    /* Shuffle */
    shuffle() {
        const properArray = [
            ...this.questionDetails1.graphicInteraction.figureLabelChoices
        ];
        let rand, index = -1;
        const length = properArray.length;
        const result = Array(length);
        while (++index < length) {
            rand = Math.floor(Math.random() * (index + 1));
            result[index] = result[rand];
            result[rand] = properArray[index];
            this.userAnswer[index] = '';
        }
        this.choiceArray = result;
    }
    /* Clear user inputs */
    clearUserInputs() {
        this.shuffle();
        this.itemService.duplicateValueMethod(false);
        this.itemService.validateCompleteEntryMethod(false);
    }
    /* Get choice class name */
    getChoiceClassName(choice, correctChoice) {
        const userChoice = Number(choice);
        if (choice === null || choice === '' || choice === '0') {
            return 'wk-icon-checkmark disabled-checkmark';
        }
        else if (userChoice === correctChoice) {
            return 'wk-icon-checkmark green-checkmark';
        }
        else {
            return 'wk-icon-close wrong-checkmark';
        }
    }
    /* Select answer */
    selectAnswer() {
        const checkAttempt = this.userAnswer.find(item => item !== '');
        this.userAnswer.forEach(element => {
            if (element !== null) {
                this.hasAnswered = true;
                const answerObj = checkAttempt === undefined && this.userAnswer.length !== 0
                    ? []
                    : this.userAnswer;
                this.itemService.userAnswerMethod(answerObj);
                this.itemService.validateAnswerValueMethod(this.checkingAnswer());
            }
            else {
                this.hasAnswered = false;
                this.itemService.userAnswerMethod([]);
                this.itemService.validateAnswerValueMethod(false);
                return;
            }
        });
    }
    /* Value changed */
    valueChanged() {
        const index = -1;
        if (this.questionDetails1.userAttemptDetails.userAnswer.length !== 0) {
            this.userAnswer = this.questionDetails1.userAttemptDetails.userAnswer.map(item => {
                if (item === 0 || item === '0' || !item) {
                    return (item = '');
                }
                else {
                    return item.toString();
                }
            });
        }
        const checkAttempt = this.userAnswer.find(item => item !== '');
        this.userAnswer.forEach(element => {
            if (element !== null) {
                this.hasAnswered = true;
                const answerObj = checkAttempt === undefined && this.userAnswer.length !== 0
                    ? []
                    : this.userAnswer;
                this.itemService.userAnswerMethod(answerObj);
                this.itemService.validateAnswerValueMethod(this.checkingAnswer());
            }
            else {
                this.hasAnswered = false;
                this.itemService.userAnswerMethod([]);
                this.itemService.validateAnswerValueMethod(false);
                return;
            }
        });
    }
    /* Checking answer */
    checkingAnswer() {
        const properArray = this.questionDetails1.graphicInteraction
            .figureLabelChoices;
        let check;
        if (this.userAnswer.length !== properArray.length) {
            check = false;
        }
        else {
            for (let i = 0; i < this.userAnswer.length; i++) {
                if (Number(this.userAnswer[i]) === properArray[i].choiceId) {
                    check = true;
                }
                else {
                    check = false;
                    return check;
                }
            }
        }
        return check;
    }
    /* Check duplicate values */
    checkDuplicate(index, abc) {
        this.duplicateIndexes = [];
        this.userAnswer.forEach((answer, ind) => {
            if (answer &&
                this.userAnswer.indexOf(answer) !== this.userAnswer.lastIndexOf(answer)) {
                this.duplicateIndexes.push(this.userAnswer.lastIndexOf(answer));
            }
        });
        this.itemService.duplicateValueMethod(this.duplicateIndexes.length > 0 ? true : false);
    }
    /* Check full entry */
    checkFullEntry() {
        const intialLength = this.userAnswer.length;
        this.isPartialEmpty =
            this.userAnswer.filter(item => item).length < intialLength ? true : false;
        this.iscompletlyEmpty =
            this.userAnswer.filter(item => item).length === 0 ? true : false;
        if (this.iscompletlyEmpty === true && this.isPartialEmpty === false) {
            this.itemService.validateCompleteEntryMethod(false);
        }
        else if (this.iscompletlyEmpty === false &&
            this.isPartialEmpty === true) {
            this.itemService.validateCompleteEntryMethod(true);
        }
        else {
            this.itemService.validateCompleteEntryMethod(false);
        }
    }
    createQuestion() {
        this.userAnswer = [];
        this.itemService.userAnswerMethod([]);
        this.itemService.validateAnswerValueMethod(false);
        this.itemService.userAnswerState.subscribe(answer => (this.userAnswerService = answer));
        this.itemService.duplicateValueMethod(false);
        this.itemService.duplicateValueState.subscribe(duplicate => (this.duplicateKeyValue = duplicate));
        this.correctOptions = [
            ...this.questionDetails1.graphicInteraction.figureLabelChoices
        ];
        this.assetData = this.questionDetails1.assets;
        this.checkingAnswer();
        this.shuffle();
        this.valueChanged();
    }
    splitStringForType(type, value) {
        const name = value.split('.')[1];
        switch (type) {
            case 'image':
                return `data:image/${name};base64,`;
            case 'audio':
                return `data:audio/${name};base64,`;
            case 'video':
                return `data:video/${name};base64,`;
            default:
                break;
        }
    }
    loadImagePath(assetType, slide) {
        if (this.quizService.isOnline) {
            return slide.assetPath;
        }
        return this.splitStringForType(assetType, slide.assetName) + slide.assetsContent;
    }
};
FigureLabelingComponent.ctorParameters = () => [
    { type: ItemService },
    { type: DomSanitizer },
    { type: QuizService }
];
__decorate([
    Input('questionDetails')
], FigureLabelingComponent.prototype, "questionCurrentData", null);
__decorate([
    Input()
], FigureLabelingComponent.prototype, "examEngineType", void 0);
__decorate([
    Input()
], FigureLabelingComponent.prototype, "canShowMetadata", void 0);
__decorate([
    Input()
], FigureLabelingComponent.prototype, "isClearAnswer", void 0);
__decorate([
    Input()
], FigureLabelingComponent.prototype, "isShowHide", void 0);
__decorate([
    Input()
], FigureLabelingComponent.prototype, "imagePath", void 0);
__decorate([
    Input()
], FigureLabelingComponent.prototype, "checkQuizSubmission", void 0);
__decorate([
    Input()
], FigureLabelingComponent.prototype, "selectedTheme", void 0);
__decorate([
    Input()
], FigureLabelingComponent.prototype, "fontSize", void 0);
__decorate([
    Input()
], FigureLabelingComponent.prototype, "preferredTextFormat", void 0);
FigureLabelingComponent = __decorate([
    Component({
        selector: 'figure-labeling',
        template: "<!--########################### QP Exam Engine type ####################-->\n<ng-container *ngIf=\"examEngineType == 'QP' || examEngineType == 'NCLEX'\">\n  <div class=\"wk-col-12\">\n    <div class=\"wk-layout-item mb20 wk-clear-box\">\n      <div class=\"wk-field-item \">\n        <!--Question Label Image-->\n        <div>\n          <figure-label\n            *ngIf=\"questionDetails1.assets[0].assetName\"\n            [correctOptions]=\"correctOptions\"\n            [userAnswer]=\"userAnswer\"\n            [imagePath]=\"imagePath\"\n            [assetData]=\"assetData\"\n          ></figure-label>\n        </div>\n        <div *ngIf=\"canShowMetadata && message != true\">\n          <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n        </div>\n        <p class=\"wkqp-prewrap mb20\" *ngIf=\"message && hasAnswered\">\n          <strong\n            [ngClass]=\"\n              checkingAnswer()\n                ? 'wkqp-alert-success wkqp-success'\n                : 'wkqp-alert-danger wkqp-danger'\n            \"\n          >\n            Your Response:\n          </strong>\n        </p>\n        <div class=\"wk-table-permit-overflow common-full-width mt10\">\n          <table class=\"wk-table assets-permit-mt25mb0\">\n            <thead>\n              <tr>\n                <th colspan=\"3\" class=\"figure-labeling-table-head\">\n                  Select the label that applies to the area marked with numbers\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr\n                *ngFor=\"\n                  let labelDetails of questionDetails1.graphicInteraction\n                    .figureLabelChoices;\n                  let i = index\n                \"\n              >\n                <td width=\"10%\">\n                  <span class=\"wk-prewrap\">{{ i + 1 }}</span>\n                </td>\n                <td width=\"80%\">\n                  <div\n                    class=\"wk-select-field\"\n                    [class.wkqp-alert-error]=\"duplicateIndexes.indexOf(i) >= 0\"\n                  >\n                    <select\n                      attr.aria-label=\"Select the label {{ i + 1 }}\"\n                      id=\"figureLabel{{ i }}\"\n                      (change)=\"\n                        checkDuplicate(i, userAnswer[i]);\n                        selectAnswer();\n                        getChoiceClassName(\n                          userAnswer[i],\n                          labelDetails.choiceId\n                        );\n                        checkingAnswer();\n                        checkFullEntry()\n                      \"\n                      [(ngModel)]=\"userAnswer[i]\"\n                    >\n                      <option [value]=\"''\">Select</option>\n                      <option\n                        [value]=\"figureLabel.choiceId\"\n                        *ngFor=\"let figureLabel of choiceArray\"\n                        ><span\n                          libGetFormatText\n                          [preferredTextFormat]=\"preferredTextFormat\"\n                          [plainText]=\"figureLabel.label\"\n                          [richText]=\"figureLabel.richLabel\"\n                        ></span\n                      ></option>\n                    </select>\n                  </div>\n                  <div *ngIf=\"canShowMetadata\">\n                    <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n                  </div>\n                  <div\n                    class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap\"\n                    *ngIf=\"\n                      checkQuizSubmission == true && labelDetails.rationale\n                    \"\n                  >\n                    <strong>Rationale: </strong>\n                    <span\n                      libGetFormatText\n                      [preferredTextFormat]=\"preferredTextFormat\"\n                      [plainText]=\"labelDetails.rationale\"\n                      [richText]=\"labelDetails.richRationale\"\n                    ></span>\n                  </div>\n                </td>\n                <td *ngIf=\"message\">\n                  <span\n                    [ngClass]=\"\n                      getChoiceClassName(userAnswer[i], labelDetails.choiceId)\n                    \"\n                  ></span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n        <p\n          role=\"alert\"\n          aria-live=\"assertive\"\n          aria-atomic=\"(duplicateKeyValue)\"\n          class=\"wk-alert-danger\"\n          id=\"figureLabelError\"\n          *ngIf=\"duplicateIndexes.length != 0\"\n        >\n          <strong>\n            Error: Duplicate labels are selected\n          </strong>\n        </p>\n\n        <div class=\"wk-layout-item  mb20\" *ngIf=\"message\">\n          <div class=\"wk-field-item\">\n            <ng-container>\n              <p\n                class=\"wk-prewrap wkqp-alert-success wkqp-success mb20\"\n                *ngIf=\"!checkingAnswer()\"\n              >\n                <strong>Correct Response:</strong>\n              </p>\n              <img\n                [src]=\"loadImagePath('image', assetData[1])\"\n                class=\"img-responsive\"\n                alt=\"Image\"\n              />\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"message\" class=\"common-full-width 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    </div>\n  </div>\n</ng-container>\n\n<!--########################### USMLE Exam Engine type ####################-->\n<ng-container *ngIf=\"examEngineType == 'USMLE'\">\n  <div class=\"wk-col-12\">\n    <div class=\"wk-layout-item mb20 wk-clear-box\">\n      <div class=\"wk-field-item \">\n        <div>\n          <figure-label\n            *ngIf=\"questionDetails1.assets[0].assetName\"\n            [correctOptions]=\"correctOptions\"\n            [userAnswer]=\"userAnswer\"\n            [imagePath]=\"imagePath\"\n            [assetData]=\"assetData\"\n            [fontSize]=\"fontSize\"\n            [selectedTheme]=\"selectedTheme\"\n          ></figure-label>\n        </div>\n        <p\n          class=\"wk-prewrap \"\n          *ngIf=\"checkQuizSubmission == true && hasAnswered\"\n        >\n          <strong\n            [ngClass]=\"\n              checkingAnswer()\n                ? 'wkqp-alert-success wkqp-success'\n                : 'wkqp-alert-danger wkqp-danger'\n            \"\n          >\n            Your Response:\n          </strong>\n        </p>\n        <div class=\"wk-table-permit-overflow\">\n          <table class=\"wk-table assets-permit-mt25mb0\">\n            <thead>\n              <tr>\n                <th\n                  colspan=\"3\"\n                  class=\"figure-labeling-table-head\"\n                  [ngStyle]=\"{\n                    'background-color':\n                      selectedTheme == true ? 'black' : 'white',\n                    color: selectedTheme == true ? 'white' : '#474747',\n                    'font-size': fontSize\n                  }\"\n                >\n                  Select the label that applies to the area marked with numbers\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr\n                *ngFor=\"\n                  let labelDetails of questionDetails1.graphicInteraction\n                    .figureLabelChoices;\n                  let i = index\n                \"\n              >\n                <td\n                  width=\"10%\"\n                  [ngStyle]=\"{\n                    'background-color':\n                      selectedTheme == true ? 'black' : 'white',\n                    color: selectedTheme == true ? 'white' : '#474747',\n                    'font-size': fontSize\n                  }\"\n                >\n                  <span class=\"wk-prewrap\">{{ i + 1 }}</span>\n                </td>\n                <td\n                  width=\"80%\"\n                  [ngStyle]=\"{\n                    'background-color':\n                      selectedTheme == true ? 'black' : 'white',\n                    color: selectedTheme == true ? 'white' : '#474747',\n                    'font-size': fontSize\n                  }\"\n                >\n                  <div\n                    class=\"wk-select-field\"\n                    [class.wkqp-alert-error]=\"duplicateIndexes.indexOf(i) >= 0\"\n                  >\n                    <select\n                      attr.aria-label=\"Select the label {{ i + 1 }}\"\n                      id=\"figureLabel{{ i }}\"\n                      (change)=\"\n                        selectAnswer();\n                        getChoiceClassName(\n                          userAnswer[i],\n                          labelDetails.choiceId\n                        );\n                        checkDuplicate(i, userAnswer[i]);\n                        checkingAnswer();\n                        checkFullEntry()\n                      \"\n                      [(ngModel)]=\"userAnswer[i]\"\n                      [ngStyle]=\"{\n                        'background-color':\n                          selectedTheme == true ? 'black' : 'white',\n                        color: selectedTheme == true ? 'white' : '#474747'\n                      }\"\n                    >\n                      <option [value]=\"''\">Select</option>\n                      <option\n                        [value]=\"figureLabel.choiceId\"\n                        *ngFor=\"let figureLabel of choiceArray\"\n                        >{{ figureLabel.label }}</option\n                      >\n                    </select>\n                  </div>\n                  <div\n                    class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap\"\n                    *ngIf=\"\n                      checkQuizSubmission == true && labelDetails.rationale\n                    \"\n                  >\n                    <strong>Rationale: </strong>{{ labelDetails.rationale }}\n                  </div>\n                </td>\n                <td *ngIf=\"checkQuizSubmission == true\">\n                  <span\n                    [ngClass]=\"\n                      getChoiceClassName(userAnswer[i], labelDetails.choiceId)\n                    \"\n                  ></span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n        <p\n          role=\"alert\"\n          aria-live=\"assertive\"\n          aria-label=\"Duplicate labels are selected\"\n          aria-atomic=\"true\"\n          class=\"wk-alert-danger\"\n          id=\"figureLabelError\"\n          *ngIf=\"duplicateIndexes.length != 0\"\n        >\n          <strong>\n            Error: Duplicate labels are selected\n          </strong>\n        </p>\n\n        <div class=\"wk-layout-item mb20  \" *ngIf=\"checkQuizSubmission == true\">\n          <div class=\"wk-field-item\">\n            <ng-container>\n              <p class=\"wk-prewrap wkqp-alert-success wkqp-success\">\n                <strong>Correct Response:</strong>\n              </p>\n              <img\n                [src]=\"loadImagePath('image', assetData[1])\"\n                class=\"img-responsive\"\n                alt=\"Image\"\n                width=\"300px\"\n              />\n              <p\n                *ngIf=\"\n                  questionDetails1.modelFeedback[0] &&\n                  questionDetails1.modelFeedback[0].length !== 0\n                \"\n              >\n                <strong>Rationale: </strong>\n                <span>{{\n                  questionDetails1.modelFeedback[0].feedbackText\n                }}</span>\n              </p>\n              <div\n                *ngIf=\"\n                  questionDetails1.remediationLinks &&\n                  questionDetails1.remediationLinks.length !== 0\n                \"\n              >\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      </div>\n    </div>\n  </div>\n</ng-container>\n",
        styles: [".wkqp-table>tfoot>tr>th,.wkqp-table>thead>tr>th.figure-labeling-table-head{text-transform:none;font-size:16px;font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif!important}.wk-alert-danger{border:0;color:#e5202e;font-size:.87891rem;font-style:italic}.figure-labeling-table-head{font-size:16px}:focus{outline:-webkit-focus-ring-color auto 1px;outline:-moz-focus-ring-color auto 1px;border:none}@-moz-document url-prefix(){.wk-select-field>select:focus{box-shadow:0 0 2px #5f67ff;border:1px solid #5f67ff}}.wkqp-alert-error select{border:1px solid red!important;outline:0}"]
    })
], FigureLabelingComponent);
export { FigureLabelingComponent };
//# sourceMappingURL=data:application/json;base64, 