import { __awaiter, __decorate } from "tslib";
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { SharedService } from '../../../../shared/service/shared.service';
import { BsModalService } from 'ngx-bootstrap/modal';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { SummaryBase } from '../summary-base';
import { QuizService } from '../../../../shared/service/quiz.service';
import { EmailDetails } from '../../../../shared/models/email-content.model';
let SummaryHeaderDetailsComponent = class SummaryHeaderDetailsComponent extends SummaryBase {
    constructor(sharedService, modalService, quizService) {
        super(sharedService);
        this.sharedService = sharedService;
        this.modalService = modalService;
        this.quizService = quizService;
        this.Editor = ClassicEditor;
        this.sendSuccess = false;
        this.sendError = false;
        this.isSubmitDisabled = false;
        this.myColumnNames = ['Question', 'Count'];
        this.myOptions = {
            colors: ['#85BC20', '#E5202E', '#007AC3'],
            is3D: true
        };
        this.myData = [];
        this.summaryData = [];
        this.render = true;
        this.options = {
            floor: 0,
            ceil: 100,
            showSelectionBar: true,
            hideLimitLabels: true,
            hidePointerLabels: true,
            getSelectionBarColor: (value) => {
                return '#429ce3';
            }
        };
        this.pageLoader = false;
        this.reportContentErrorDetails = new EventEmitter();
        this.reportMailContentDetails = new EventEmitter();
    }
    ngOnChanges(changes) {
        if (this.question) {
            this.initialLoadForsummaryData(this.question);
            this.clientDetails = this.question.clientDetails;
        }
        if (this.mailSuccessDataDetails) {
            this.isSubmitDisabled = true;
            this.sendSuccess = true;
        }
        else {
            this.sendError = true;
        }
    }
    ngOnInit() {
        this.convertedTime = this.convertTime2(this.question.totalTimeSpent, 'time');
        this.instanceData = this.quizService.instanceDetails;
    }
    initialLoadForsummaryData(data) {
        if (data) {
            this.summaryData = data;
            const date = new Date(this.summaryData.testCompletedDateUT * 1000);
            this.completedDate = date.toISOString();
            this.timeSpent = this.summaryData.totalTimeSpent;
            this.totalQuestions = this.summaryData.totalQuestions;
            this.totalCorrect = this.summaryData.totalCorrect;
            this.totalAnswered =
                this.summaryData.totalCorrect + this.summaryData.totalIncorrect;
            this.render = true;
            this.summaryDisplay = this.summaryData.summaryDisplay;
            this.summaryPredefinedText = this.summaryData.summaryPredefinedText;
            this.myData = [
                ['Correct', this.summaryData.totalCorrect],
                ['Incorrect', this.summaryData.totalIncorrect],
                ['Unattempted', this.summaryData.totalUnattempted]
            ];
        }
    }
    // Get the total percentage
    getTotalCorrectPrecent() {
        let percentage = ((this.totalCorrect * 100) /
            this.totalQuestions).toString();
        return (this.totalCorrect + ' (' + Number.parseFloat(percentage).toFixed(1) + '%)');
    }
    reportContentErrorTemplate(template) {
        return __awaiter(this, void 0, void 0, function* () {
            yield this.reportContentErrorDetails.emit(this.clientDetails);
            setTimeout(() => {
                this.reportContentError(template);
            }, 1000);
        });
    }
    // generate modal to report quiz content error to quiz provider
    reportContentError(template) {
        if (this.templateDataDetails) {
            this.sendSuccess = false;
            this.modalRef = this.modalService.show(template);
        }
    }
    sendmail() {
        this.sendMailData = new EmailDetails();
        this.sendMailData.feedBack = this.templateDataDetails.templateContent;
        this.sendMailData.to = this.clientDetails.supportEmailAddress;
        this.sendMailData.subject = this.templateDataDetails.subject;
        this.sendMailData.from = this.clientDetails.userEmail;
        this.sendMailData.clientId = this.clientDetails.clientId;
        this.sendMailData.userId = this.clientDetails.userId;
        this.sendMailData.userTestPkId = this.instanceData.id;
        this.sendMailData.userName = this.clientDetails.userName;
        this.reportMailContentDetails.emit(this.sendMailData);
    }
};
SummaryHeaderDetailsComponent.ctorParameters = () => [
    { type: SharedService },
    { type: BsModalService },
    { type: QuizService }
];
__decorate([
    Output('reportContentError')
], SummaryHeaderDetailsComponent.prototype, "reportContentErrorDetails", void 0);
__decorate([
    Output('reportMailContent')
], SummaryHeaderDetailsComponent.prototype, "reportMailContentDetails", void 0);
__decorate([
    Input('summaryData')
], SummaryHeaderDetailsComponent.prototype, "question", void 0);
__decorate([
    Input('templateData')
], SummaryHeaderDetailsComponent.prototype, "templateDataDetails", void 0);
__decorate([
    Input('mailSuccessData')
], SummaryHeaderDetailsComponent.prototype, "mailSuccessDataDetails", void 0);
SummaryHeaderDetailsComponent = __decorate([
    Component({
        selector: 'lib-summary-header-details',
        template: "<script src=\"https://cdn.ckeditor.com/4.13.1/full/ckeditor.js\"></script>\n<div style=\"width:70%;text-align: center; overflow:auto;\" *ngIf=\"!render\">\n  <span\n    style=\"font-size:80px;color:#007bff\"\n    class=\"wk-icon-spin wk-spin wkqp-spin-center\"\n  ></span>\n  <h2\n    style=\"font-size:24px;text-align: center;width:100%;margin:0px;padding:0px;\"\n  >\n    Loading Summary...\n  </h2>\n</div>\n<div *ngIf=\"render === true && summaryDisplay !== 3\" [hidden]=\"pageLoader\">\n  <h1 class=\"quiz-main-title pb10\">Quiz Results</h1>\n  <div class=\"wk-row\">\n    <div class=\"wk-col-12 wkqp-register-bg mb20\">\n      <div class=\"wk-col-6\">\n        <div class=\"wk-layout-50-50\">\n          <div class=\"wk-layout-item\">\n            <div class=\"wk-field-item\">\n              <div class=\"wk-field-header summary-label\">\n                <span>Quiz Name</span>\n              </div>\n              <span>{{ summaryData.title }}</span>\n            </div>\n          </div>\n          <div class=\"wk-layout-item\">\n            <div class=\"wk-field-item\">\n              <div class=\"wk-field-header summary-label\">\n                <span>Completed Date</span>\n              </div>\n              <span>{{\n                (completedDate | date: 'yyyy-MM-dd HH:mm:ss') || 'NA'\n              }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"wk-layout-50-50\">\n          <div class=\"wk-layout-item\">\n            <div class=\"wk-field-item\">\n              <div class=\"wk-field-header summary-label\">\n                <span>Quiz Completed in</span>\n              </div>\n              <span>{{ convertedTime }}</span>\n            </div>\n          </div>\n          <div class=\"wk-layout-item\">\n            <div class=\"wk-field-item\">\n              <div class=\"wk-field-header summary-label\">\n                <span>Total Questions</span>\n              </div>\n              <span>{{ totalQuestions }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"wk-layout-50-50\">\n          <div class=\"wk-layout-item\">\n            <div class=\"wk-field-item\">\n              <div class=\"wk-field-header summary-label\">\n                <span>Questions Answered</span>\n              </div>\n              <span>{{ totalAnswered }}</span>\n            </div>\n          </div>\n          <div class=\"wk-layout-item\">\n            <div class=\"wk-field-item\">\n              <div class=\"wk-field-header summary-label\">\n                <span>Answered Correctly</span>\n              </div>\n              <span [innerText]=\"getTotalCorrectPrecent()\"></span>\n            </div>\n          </div>\n        </div>\n        <!-- report content error btn -->\n        <div class=\"box\" *ngIf=\"clientDetails.enableReportError\">\n          <button\n            type=\"button\"\n            (click)=\"reportContentErrorTemplate(template)\"\n            class=\"wk-button-primary report-content-btn\"\n          >\n            Report content error\n          </button>\n        </div>\n      </div>\n      <div class=\"wk-col-6\">\n        <div class=\"wk-layout\">\n          <div class=\"wk-field-item\">\n            <google-chart\n              class=\"chat-wrapper\"\n              [title]=\"myTitle\"\n              [type]=\"'PieChart'\"\n              [data]=\"myData\"\n              [columnNames]=\"myColumnNames\"\n              [options]=\"myOptions\"\n            >\n            </google-chart>\n          </div>\n        </div>\n      </div>\n\n      <!-- report content error btn -->\n    </div>\n\n    <div class=\"wk-layout quiz-ans-section\" *ngIf=\"summaryDisplay === 1\">\n      <div class=\"wk-layout-item\">\n        <h2 class=\"wkqp-module-heading pb20\">Quiz Answers</h2>\n      </div>\n    </div>\n  </div>\n</div>\n<div\n  class=\"wk-summary-3\"\n  *ngIf=\"summaryPredefinedText != null && summaryDisplay === 3\"\n>\n  {{ summaryPredefinedText }}\n</div>\n\n<!-- report content modal -->\n<ng-template #template class=\"modal-dialog modal-lg\">\n  <div class=\"modal-content\">\n    <div class=\"modal-title-main\">\n      Report content error\n    </div>\n    <button\n      aria-label=\"close dialog\"\n      class=\"wk-icon-close-empty\"\n      role=\"button\"\n      type=\"button\"\n      (click)=\"modalRef.hide()\"\n    ></button>\n    <div class=\"modal-body\" id=\"modal-body\">\n      <div class=\"wk-field-item mb20\">\n        <div class=\"wk-field-header\">\n          <label for=\"TO\">To <span class=\"mandatory-fields\">*</span></label>\n        </div>\n        <div>\n          <input\n            maxlength=\"80\"\n            id=\"TO\"\n            type=\"text\"\n            placeholder=\"clientDetails.supportEmailAddress\"\n            [(ngModel)]=\"clientDetails.supportEmailAddress\"\n            readonly=\"clientDetails.supportEmailAddress\"\n          />\n        </div>\n      </div>\n      <div class=\"wk-field-item mb20\">\n        <div class=\"wk-field-header\">\n          <label for=\"SUBJECT\"\n            >Subject <span class=\"mandatory-fields\">*</span></label\n          >\n        </div>\n        <div>\n          <input\n            maxlength=\"80\"\n            id=\"SUBJECT\"\n            type=\"text\"\n            placeholder=\"templateDataDetails.subject\"\n            [(ngModel)]=\"templateDataDetails.subject\"\n            readonly=\"templateDataDetails.subject\"\n          />\n        </div>\n      </div>\n      <div class=\"wk-field-item mb20\">\n        <div>\n          <ckeditor\n            tagName=\"textarea\"\n            [editor]=\"Editor\"\n            [(ngModel)]=\"templateDataDetails.templateContent\"\n            [config]=\"{ uiColor: '#99000' }\"\n          >\n          </ckeditor>\n        </div>\n      </div>\n      <div *ngIf=\"sendSuccess\" class=\"wk-field-success mb20\">\n        Email sent successfully\n      </div>\n      <div *ngIf=\"sendError\" class=\"wk-field-error mb20\">\n        Something went wrong\n      </div>\n    </div>\n    <div class=\"modal-footer\">\n      <button\n        class=\"wkqp-button wkqp-button-danger\"\n        type=\"button\"\n        (click)=\"modalRef.hide()\"\n      >\n        Cancel\n      </button>\n      <button\n        class=\"wkqp-button wkqp-button-warning\"\n        [ngClass]=\"{ 'custom-icon-disabled': isSubmitDisabled }\"\n        type=\"button\"\n        (click)=\"sendmail()\"\n      >\n        Send\n      </button>\n    </div>\n  </div>\n</ng-template>\n<!-- report content modal -->\n",
        changeDetection: ChangeDetectionStrategy.OnPush,
        styles: [".wkqp-badge-danger{top:-4px}.chat-wrapper{background-color:#fff;border:1px solid #a3a3a3;width:572px;height:278px}.modal-dialog{margin:0 auto!important;top:50%!important;transform:translate(-50%,-50%)!important;-ms-transform:translate(-50%,-50%)!important;position:absolute!important;left:50%;width:550px;min-width:550px}.modal-footer{float:left;width:100%;padding:15px;text-align:right;border-top:0 solid #e5e5e5!important}.close.pull-right .wk-icon-close-empty{background-color:transparent;border:0;padding:0;border-radius:0;color:#80bde1;font-size:40px;font-weight:300!important}.close.pull-right .wk-icon-close-empty:before{font-weight:300!important}.close.pull-right .wk-icon-close-empty:hover{color:#fff;background-color:transparent}button.close:focus,button.close:hover{background-color:transparent!important;color:#fff}.wk-field-success{color:#3d854d;font-weight:600;border:1px solid #3d854d;padding:10px;font-style:oblique}"]
    })
], SummaryHeaderDetailsComponent);
export { SummaryHeaderDetailsComponent };
//# sourceMappingURL=data:application/json;base64, 