import { __decorate } from "tslib";
import { Component, Input } from "@angular/core";
import { ItemService } from "../item-service/item-service.service";
import { DomSanitizer } from "@angular/platform-browser";
var HotSpotComponent = /** @class */ (function () {
    function HotSpotComponent(itemService, _DomSanitizationService) {
        this.itemService = itemService;
        this._DomSanitizationService = _DomSanitizationService;
        // Declare the variables
        this.hotspot = true;
        this.userAnswer = [];
        this.correctAns = false;
        this.viewUserAnswer = "userResponse";
        this.viewCorrectAnswer = "correctAnswer";
        this.selectAnswer = "selectAnswer";
        this.userResponse = false;
        this.viewUserAnswerValue = [];
        this.questionDetails1 = [];
        this.imagePath = [];
    }
    Object.defineProperty(HotSpotComponent.prototype, "questionDetails", {
        get: function () {
            return this.questionDetails;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(HotSpotComponent.prototype, "questionCurrentData", {
        set: function (value) {
            if (value) {
                this.questionDetails1 = value;
                this.createQuestion();
            }
            else {
                this.questionDetails1 = [];
                this.createQuestion();
            }
        },
        enumerable: true,
        configurable: true
    });
    /* Init */
    HotSpotComponent.prototype.ngOnInit = function () { };
    /* Do check */
    HotSpotComponent.prototype.ngDoCheck = function () {
        if (this.isClearAnswer === true) {
            this.itemService.clearAnswerMethodFalse(false);
            this.itemService.hideAnswer(false);
            this.itemService.userAnswerMethod([]);
            this.clearUserInputs();
        }
        if (this.isShowHide === true) {
            this.message = true;
        }
        else if (this.isShowHide === false) {
            this.message = false;
        }
    };
    /* Clear User Inputs */
    HotSpotComponent.prototype.clearUserInputs = function () {
        var answerObj = [];
        this.userAnswer = [];
        this.itemService.userAnswerMethod(answerObj);
    };
    /* Check Empty asset */
    HotSpotComponent.prototype.checkEmptyAsset = function () {
        return Object.keys(this.assetData).length === 0;
    };
    /* Validate the user answer */
    HotSpotComponent.prototype.userAnswerValue = function (userAnswerValue) {
        console.log("useranswer from child", userAnswerValue);
        this.viewUserAnswerValue = userAnswerValue;
        this.correctAns = false;
        if (userAnswerValue &&
            this.questionDetails1.graphicInteraction.hotspotChoices[0] &&
            this.questionDetails1.graphicInteraction.hotspotChoices[0].shape === 1) {
            // Circle area validation
            var coordinates = this.questionDetails1.graphicInteraction.hotspotChoices[0].coords.split(",");
            var centerX = Number(coordinates[0]), centerY = Number(coordinates[1]), ansRadius = Number(coordinates[2]), userX = userAnswerValue[0], userY = userAnswerValue[1];
            var distance = Math.sqrt(Math.pow(userX - centerX, 2) + Math.pow(userY - centerY, 2));
            if (distance <= ansRadius) {
                this.questionDetails1.correct = true;
                this.correctAns = true;
            }
        }
        else if (userAnswerValue &&
            this.questionDetails1.graphicInteraction.hotspotChoices[0] &&
            this.questionDetails1.graphicInteraction.hotspotChoices[0].shape === 2) {
            // Rectangle area validation
            var coordinates = this.questionDetails1.graphicInteraction.hotspotChoices[0].coords.split(",");
            var ansX1 = coordinates[0], ansY1 = coordinates[1], ansX2 = coordinates[2], ansY2 = coordinates[3], userX = userAnswerValue[0], userY = userAnswerValue[1];
            if (userX >= ansX1 &&
                userX <= ansX2 &&
                userY >= ansY1 &&
                userY <= ansY2) {
                this.questionDetails1.correct = true;
                this.correctAns = true;
            }
        }
        this.userAnswer = userAnswerValue;
        var answerObj = userAnswerValue;
        this.itemService.userAnswerMethod(answerObj);
        this.itemService.validateAnswerValueMethod(this.correctAns);
    };
    /* Check the value has been changed */
    HotSpotComponent.prototype.valueChanged = function () {
        if (this.questionDetails1.userAttemptDetails.userAnswer.length > 0 &&
            this.questionDetails1.graphicInteraction.hotspotChoices[0] &&
            this.questionDetails1.graphicInteraction.hotspotChoices[0].shape === 1) {
            // Circle area validation
            var coordinates = this.questionDetails1.graphicInteraction.hotspotChoices[0].coords.split(",");
            var centerX = Number(coordinates[0]), centerY = Number(coordinates[1]), ansRadius = Number(coordinates[2]), userX = this.questionDetails1.userAttemptDetails.userAnswer[0], userY = this.questionDetails1.userAttemptDetails.userAnswer[1];
            var distance = Math.sqrt(Math.pow(userX - centerX, 2) + Math.pow(userY - centerY, 2));
            if (distance <= ansRadius) {
                this.questionDetails1.correct = true;
                this.correctAns = true;
            }
            this.userAnswer = this.questionDetails1.userAttemptDetails;
            var answerObj = this.questionDetails1.userAttemptDetails.userAnswer;
            this.itemService.userAnswerMethod(answerObj);
            this.itemService.validateAnswerValueMethod(this.correctAns);
        }
        else if (this.questionDetails1.userAttemptDetails.userAnswer.length > 0 &&
            this.questionDetails1.graphicInteraction.hotspotChoices[0] &&
            this.questionDetails1.graphicInteraction.hotspotChoices[0].shape === 2) {
            // Rectangle area validation
            var coordinates = this.questionDetails1.graphicInteraction.hotspotChoices[0].coords.split(",");
            var ansX1 = coordinates[0], ansY1 = coordinates[1], ansX2 = coordinates[2], ansY2 = coordinates[3], userX = this.questionDetails1.userAttemptDetails.userAnswer[0], userY = this.questionDetails1.userAttemptDetails.userAnswer[1];
            if (userX >= ansX1 &&
                userX <= ansX2 &&
                userY >= ansY1 &&
                userY <= ansY2) {
                this.questionDetails1.correct = true;
                this.correctAns = true;
            }
            this.userAnswer = this.questionDetails1.userAttemptDetails;
            var answerObj = this.questionDetails1.userAttemptDetails.userAnswer;
            this.itemService.userAnswerMethod(answerObj);
            this.itemService.validateAnswerValueMethod(this.correctAns);
        }
    };
    HotSpotComponent.prototype.createQuestion = function () {
        var _this = this;
        this.userAnswer = [];
        this.itemService.userAnswerMethod([]);
        this.itemService.validateAnswerValueMethod(this.correctAns);
        this.itemService.userAnswerState.subscribe(function (answer) { return (_this.userAnswerService = answer); });
        this.valueChanged();
    };
    HotSpotComponent.ctorParameters = function () { return [
        { type: ItemService },
        { type: DomSanitizer }
    ]; };
    __decorate([
        Input("questionDetails")
    ], HotSpotComponent.prototype, "questionCurrentData", null);
    __decorate([
        Input()
    ], HotSpotComponent.prototype, "examEngineType", void 0);
    __decorate([
        Input()
    ], HotSpotComponent.prototype, "canShowMetadata", void 0);
    __decorate([
        Input()
    ], HotSpotComponent.prototype, "isClearAnswer", void 0);
    __decorate([
        Input()
    ], HotSpotComponent.prototype, "isShowHide", void 0);
    __decorate([
        Input()
    ], HotSpotComponent.prototype, "imagePath", void 0);
    __decorate([
        Input()
    ], HotSpotComponent.prototype, "checkQuizSubmission", void 0);
    __decorate([
        Input()
    ], HotSpotComponent.prototype, "selectedTheme", void 0);
    __decorate([
        Input()
    ], HotSpotComponent.prototype, "fontSize", void 0);
    __decorate([
        Input()
    ], HotSpotComponent.prototype, "preferredTextFormat", void 0);
    HotSpotComponent = __decorate([
        Component({
            selector: "hot-spot",
            template: "<!--############## QP Exam Engine Type ############################-->\n<ng-container *ngIf=\"examEngineType == 'QP' || examEngineType == 'NCLEX'\">\n  <div class=\"wk-row\">\n    <div\n      class=\"wk-alert-info wk-alert-dismissible newalertdismissible\"\n      *ngIf=\"hotspot == true\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"hotspot = false\"\n        class=\"wk-icon-close-empty\"\n      ></button>\n      <span class=\"icon-size wk-icon-info-outline\" style=\"float: left;\"></span>\n      <span\n        >This question type does not comply with Accessibility Standards. This\n        type does not support navigation to the hotspot area via a keyboard nor\n        will a screen reader describe the image beyond reading its alternate\n        text.</span\n      >\n    </div>\n    <!--Question text-->\n    <div class=\"wk-layout-item\">\n      <div class=\"wk-field-item normal-font mb0 \">\n        <div class=\"wk-field-header \">\n          <p\n            class=\"mb20 normal-font wk-prewrap question-prompt-text\"\n            libGetFormatText\n            [preferredTextFormat]=\"preferredTextFormat\"\n            [plainText]=\"questionDetails1.promptText\"\n            [richText]=\"questionDetails1.richPromptText\"\n          ></p>\n        </div>\n\n        <!--Hotspot image-->\n        <div *ngIf=\"questionDetails1.assets[0]\">\n          <hotspot-svg\n            class=\"hotspot-focus\"\n            [userAnswerDetails]=\"userAnswer\"\n            [isClearAnswer]=\"isClearAnswer\"\n            [imagePath]=\"imagePath\"\n            [imageType]=\"questionDetails1.assets[0].assetName\"\n            [imageSrc]=\"questionDetails1.assets[0]\"\n            (userAnswerFromChild)=\"userAnswerValue($event)\"\n            [accessType]=\"selectAnswer\"\n          ></hotspot-svg>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"canShowMetadata && message != true\">\n      <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n    </div>\n\n    <!--your answer and correct answer-->\n    <ng-container *ngIf=\"message\">\n      <div class=\"wkqp-layout-item mb20\">\n        <div class=\"wkqp-field-item\">\n          <div tabindex=\"0\">\n            <!--Your Response-->\n            <p\n              class=\"wkqp-prewrap mb20\"\n              *ngIf=\"userAnswer.length !== 0\"\n              [ngClass]=\"\n                !correctAns\n                  ? 'wkqp-alert-danger wkqp-danger'\n                  : 'wkqp-alert-success wkqp-success'\n              \"\n            >\n              <strong>Your Response: </strong>\n            </p>\n            <div class=\"common-full-width mt10\" *ngIf=\"userAnswer.length !== 0\">\n              <hotspot-svg\n                class=\"hotspot-focus\"\n                [hideLabel]=\"true\"\n                [userAnswerDetails]=\"userAnswer\"\n                (userAnswerFromChild)=\"userAnswerValue($event)\"\n                [imageSrc]=\"questionDetails1.assets[0]\"\n                [imageType]=\"questionDetails1.assets[0].assetName\"\n                [accessType]=\"viewUserAnswer\"\n              ></hotspot-svg>\n            </div>\n\n            <!--Correct Response-->\n            <p\n              *ngIf=\"!correctAns || userAnswer.length === 0\"\n              class=\"wkqp-prewrap wkqp-alert-success wkqp-success mb20\"\n            >\n              <strong>Correct Response: </strong>\n            </p>\n            <div\n              class=\"common-full-width mt10\"\n              *ngIf=\"!correctAns || userAnswer.length === 0\"\n            >\n              <hotspot-svg\n                class=\"hotspot-focus\"\n                [hideLabel]=\"true\"\n                [correctAnswerDetails]=\"\n                  questionDetails1['graphicInteraction']['hotspotChoices'][0]\n                \"\n                [isClearAnswer]=\"isClearAnswer\"\n                [imagePath]=\"imagePath\"\n                [imageType]=\"questionDetails1.assets[0].assetName\"\n                [imageSrc]=\"questionDetails1.assets[0]\"\n                [accessType]=\"viewCorrectAnswer\"\n              ></hotspot-svg>\n            </div>\n            <div *ngIf=\"canShowMetadata\">\n              <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    <div class=\"common-full-width mb20\" *ngIf=\"message\">\n      <!--Rationale-->\n      <lib-rationale\n        [itemData]=\"questionDetails1.modelFeedback\"\n        [preferredTextFormat]=\"preferredTextFormat\"\n      ></lib-rationale>\n\n      <!--Remediation-->\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  <div class=\"wk-row\">\n    <div\n      class=\"wk-alert-info wk-alert-dismissible\"\n      *ngIf=\"hotspot == true\"\n      [ngStyle]=\"{\n        'background-color': selectedTheme == true ? 'black' : 'white',\n        color: selectedTheme == true ? 'white' : '#474747'\n      }\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"hotspot = false\"\n        class=\"wk-icon-close-empty\"\n      ></button>\n      <span class=\"icon-size wk-icon-info-outline\" style=\"float: left;\"></span>\n      <span\n        >This question type does not comply with Accessibility Standards. This\n        type does not support navigation to the hotspot area via a keyboard nor\n        will a screen reader describe the image beyond reading its alternate\n        text.</span\n      >\n    </div>\n\n    <!--Question prompt text-->\n    <div class=\"wk-layout-item\">\n      <div class=\"wk-field-item normal-font mb0 \">\n        <div class=\"wk-field-header \">\n          <p class=\"mb20 normal-font wk-prewrap question-prompt-text\">\n            {{ questionDetails1.promptText }}\n          </p>\n        </div>\n        <div>\n          <hotspot-svg\n            [fontSize]=\"fontSize\"\n            [selectedTheme]=\"selectedTheme\"\n            [userAnswerDetails]=\"userAnswer\"\n            [isClearAnswer]=\"isClearAnswer\"\n            [imagePath]=\"imagePath\"\n            [imageType]=\"questionDetails1.assets[0].assetName\"\n            [imageSrc]=\"questionDetails1.assets[0].assetsContent\"\n            (userAnswerFromChild)=\"userAnswerValue($event)\"\n            [accessType]=\"selectAnswer\"\n          ></hotspot-svg>\n        </div>\n      </div>\n    </div>\n\n    <!--Your response and correct response-->\n    <ng-container *ngIf=\"checkQuizSubmission == true\">\n      <div class=\"wkqp-layout-item mb20  \">\n        <div class=\"wkqp-field-item\">\n          <div tabindex=\"0\">\n            <!--Your Response-->\n            <p\n              class=\"wkqp-prewrap \"\n              *ngIf=\"userAnswer.length !== 0\"\n              [ngClass]=\"\n                !correctAns\n                  ? 'wkqp-alert-danger wkqp-danger'\n                  : 'wkqp-alert-success wkqp-success'\n              \"\n            >\n              <strong>Your Response: </strong>\n            </p>\n            <div *ngIf=\"userAnswer.length !== 0\">\n              <hotspot-svg\n                [fontSize]=\"fontSize\"\n                [selectedTheme]=\"selectedTheme\"\n                [hideLabel]=\"true\"\n                [userAnswerDetails]=\"userAnswer\"\n                (userAnswerFromChild)=\"userAnswerValue($event)\"\n                [userAnswerDetails]=\"questionDetails1.userAttemptDetails\"\n                [isClearAnswer]=\"isClearAnswer\"\n                [imagePath]=\"imagePath\"\n                [imageType]=\"questionDetails1.assets[0].assetName\"\n                [imageSrc]=\"questionDetails1.assets[0].assetsContent\"\n                [isClearAnswer]=\"isClearAnswer\"\n                [accessType]=\"viewUserAnswer\"\n              ></hotspot-svg>\n            </div>\n\n            <!--Correct Response-->\n            <p\n              *ngIf=\"!correctAns\"\n              class=\"wkqp-prewrap  wkqp-alert-success wkqp-success\"\n            >\n              <strong>Correct Response: </strong>\n            </p>\n            <div *ngIf=\"!correctAns\">\n              <hotspot-svg\n                [fontSize]=\"fontSize\"\n                [selectedTheme]=\"selectedTheme\"\n                [hideLabel]=\"true\"\n                [correctAnswerDetails]=\"\n                  questionDetails1['graphicInteraction']['hotspotChoices']\n                    .length > 0\n                    ? questionDetails1['graphicInteraction'][\n                        'hotspotChoices'\n                      ][0]\n                    : []\n                \"\n                [isClearAnswer]=\"isClearAnswer\"\n                [imageType]=\"questionDetails1.assets[0].assetName\"\n                [imagePath]=\"imagePath\"\n                [imageSrc]=\"questionDetails1.assets[0].assetsContent\"\n                [accessType]=\"viewCorrectAnswer\"\n              ></hotspot-svg>\n            </div>\n\n            <!--Rationale-->\n            <p\n              class=\"correct-rationale-section\"\n              *ngIf=\"questionDetails1.modelFeedback[0].length !== 0\"\n            >\n              <strong>Rationale: </strong\n              >{{ questionDetails1.modelFeedback[0].feedbackText }}\n            </p>\n\n            <!--Remediation-->\n            <p\n              class=\"remediation-section\"\n              *ngIf=\"questionDetails1.remediationLinks.length !== 0\"\n            >\n              <strong>Remediation: </strong>\n            </p>\n            <div *ngFor=\"let remedies of questionDetails1.remediationLinks\">\n              <span *ngIf=\"questionDetails1.remediationLinks\">{{\n                remedies.linkText1\n              }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n",
            styles: [""]
        })
    ], HotSpotComponent);
    return HotSpotComponent;
}());
export { HotSpotComponent };
//# sourceMappingURL=data:application/json;base64, 