import { Component, EventEmitter, Input, Optional, Output, } from '@angular/core';
import { ASSETS } from '../../../../../lib/constants/assets.constants';
import * as i0 from "@angular/core";
import * as i1 from "../../../../configurations";
import * as i2 from "@angular/common";
import * as i3 from "../../../../formgroup/cs-switch/cs-switch.component";
import * as i4 from "@angular/forms";
import * as i5 from "../single-line-editor/single-line-editor.component";
// import { environment } from 'src/environments/environment';
export class WelcomeThankyouComponent {
    set allEntityData(entity) {
        if (entity) {
            this.entityData = entity;
            this.checkInputMessage();
        }
    }
    constructor(config) {
        this.ASSETS = ASSETS;
        this.deleteQuestion = new EventEmitter();
        if (config) {
            this.env = config.envConfig;
        }
    }
    ngOnInit() {
        this.entityData.hasWelcomeImage = true;
        this.entityData.hasWelcomeDescription = true;
    }
    onSelectImage(event) {
        if (event.target.files && event.target.files[0]) {
            this.isImageUploading = true;
            this.service.formsPage.welcomeImage = '';
            // tslint:disable-next-line: prefer-const
            let selectedFile = event.target.files[0];
            const uploadData = new FormData();
            uploadData.append('file', selectedFile);
            // tslint:disable-next-line: prefer-const
            let destination = 'assessment/imports' + '/welcome/';
            this.service.uploadHandler(uploadData, destination).subscribe((data) => {
                this.isImageUploading = false;
                this.service.formsPage.welcomeImage =
                    this.env?.s3Url + this.env?.s3Bucket + '/' + data.file_url_path;
            }, (error) => {
                this.isImageUploading = false;
            });
        }
    }
    //  deleteWelcome() {
    //    this.service.formsPage.hasWelcome = false;
    //    this.service.stepIdentifier = 'pagescreen';
    //    this.service.currentPageNumber = 1;
    //    this.service.formsPage.pageDetailsList.forEach(pageDetail => {
    //      if (pageDetail.pageNumber === this.service.currentPageNumber) {
    //        this.service.currentPageDetails.pageName = pageDetail.pageName;
    //        this.service.currentPageDetails.pageNumber = pageDetail.pageNumber;
    //        this.service.currentPageDetails.pageDescription = pageDetail.pageDescription;
    //      }
    //    });
    //    this.service.checkForPageDetails();
    //  }
    deleteWelcome() {
        this.service.formsPage.hasWelcome = false;
        this.service.stepIdentifier = 'pagescreen';
        this.service.currentPageNumber = 1;
        this.service.formsPage.welcomeImage = '';
        this.entityData.welcomeText = '';
        this.entityData.welcomeDescription = '';
        // this.service.formsPage.pageDetailsList.forEach(pageDetail => {
        //   if (pageDetail.pageNumber === this.service.currentPageNumber) {
        //     this.service.currentPageDetails.pageName = pageDetail.pageName;
        //     this.service.currentPageDetails.pageNumber = pageDetail.pageNumber;
        //     this.service.currentPageDetails.pageDescription = pageDetail.pageDescription;
        //   }
        // });
        // this.service.checkForPageDetails();
    }
    checkInputMessage() {
        if (typeof this.entityData?.welcomeText === 'string' &&
            this.entityData?.welcomeText.trim() == '') {
            this.entityData.welcomeText = '';
        }
        if (typeof this.entityData?.welcomeDescription === 'string' &&
            this.entityData?.welcomeDescription.trim() == '') {
            this.entityData.welcomeDescription = '';
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WelcomeThankyouComponent, deps: [{ token: i1.Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WelcomeThankyouComponent, selector: "app-welcome-thankyou", inputs: { service: "service", allEntityData: ["entityData", "allEntityData"] }, outputs: { deleteQuestion: "deleteQuestion" }, ngImport: i0, template: "<div class=\"editor-wrapper vx-mb-4\" [class.error]=\"false\" #questionContainer>\n  <div\n    class=\"editor-top vx-d-flex vx-align-center vx-justify-center vx-pl-2 vx-pr-2\"\n  >\n    <div class=\"rightside-button vx-d-flex vx-align-center\">\n      <!-- deleteQuestion.emit();  -->\n      <button\n        class=\"delete-btn vx-fs-14 vx-txt-red vx-pl-2 vx-pr-2 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\"\n        (click)=\"deleteWelcome()\"\n      >\n        <i class=\"icons\">&#xe923;</i>\n      </button>\n    </div>\n  </div>\n  <div class=\"editor-mid vx-pl-5 vx-pr-5\">\n    <div class=\"build-area vx-d-flex vx-justify-between\">\n      <div class=\"left\">\n        <div class=\"image-block vx-d-block\" *ngIf=\"entityData.hasWelcomeImage\">\n          <div class=\"image-item vx-d-flex vx-align-center vx-justify-center\">\n            <img\n              *ngIf=\"entityData.welcomeImage == '' && !isImageUploading\"\n              [src]=\"ASSETS.placeholder\"\n            />\n            <img\n              *ngIf=\"entityData.welcomeImage != '' && !isImageUploading\"\n              [src]=\"entityData?.welcomeImage\"\n            />\n            <i *ngIf=\"isImageUploading\" class=\"icons loader-icon\">&#xe929;</i>\n          </div>\n          <div class=\"button-area vx-d-flex vx-justify-center\">\n            <label\n              class=\"upload-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\"\n            >\n              <input\n                type=\"file\"\n                accept=\"image/*\"\n                (change)=\"onSelectImage($event)\"\n              />\n              {{\n                entityData?.welcomeImage == \"\" ? \"Upload Image\" : \"Change Image\"\n              }}\n            </label>\n          </div>\n        </div>\n        <app-single-line-editor\n          [placeholder]=\"'Welcome Heading'\"\n          [label]=\"false\"\n          [editorMode]=\"'multiline'\"\n          [(ngModel)]=\"entityData.welcomeText\"\n        ></app-single-line-editor>\n        <app-single-line-editor\n          *ngIf=\"entityData?.hasWelcomeDescription\"\n          [placeholder]=\"'Welcome Description'\"\n          [label]=\"false\"\n          [editorMode]=\"'multiline'\"\n          [(ngModel)]=\"entityData.welcomeDescription\"\n        ></app-single-line-editor>\n      </div>\n      <div class=\"right\">\n        <div class=\"quick-settings\">\n          <div\n            class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\"\n          >\n            QUESTION SETTINGS\n          </div>\n          <div class=\"settings-list\">\n            <ul class=\"vx-p-0 vx-m-0\">\n              <li class=\"vx-pt-3 vx-pb-3\">\n                <app-cs-switch [(ngValue)]=\"entityData.hasWelcomeDescription\">\n                  <div\n                    class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\"\n                  >\n                    <div\n                      class=\"settings-name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\"\n                    >\n                      DESCRIPTION\n                    </div>\n                  </div>\n                </app-cs-switch>\n              </li>\n              <li class=\"vx-pt-3 vx-pb-3\">\n                <app-cs-switch [(ngValue)]=\"entityData.hasWelcomeImage\">\n                  <div\n                    class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\"\n                  >\n                    <div\n                      class=\"settings-name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\"\n                    >\n                      IMAGE\n                    </div>\n                  </div>\n                </app-cs-switch>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";.editor-wrapper{border:1px solid #1e5dd3;border-radius:.25rem;position:relative}.editor-wrapper .label-mode{background:#7aa6f7;border:1px solid #1e5dd3;border-left:none;border-radius:0 .125rem .125rem 0;writing-mode:vertical-lr;position:absolute;left:-1.0625rem;top:3rem;width:1rem;transform:rotate(180deg)}.editor-wrapper.error{border-color:#d93b41}.editor-wrapper.error .editor-bottom{background:#d93b41}.editor-wrapper.with-logic{border-color:#f0b819}.editor-wrapper.with-logic .label-mode{background:#f4c84a;border-color:#f0b819}.editor-top{background:#fbfbfb;border-bottom:1px solid #F1F1F1;border-radius:.25rem .25rem 0 0;height:2.75rem;position:relative}.editor-top .rightside-button{position:absolute;right:.5rem;top:.5rem}.editor-top .rightside-button button{background:#f1f1f1;border:none;border-radius:.125rem;height:1.75rem}.editor-top .rightside-button button.delete-btn{width:1.75rem}.editor-mid{padding-top:1.5rem;padding-bottom:1.5rem}.editor-mid .build-area .left{width:calc(100% - 17.5rem);position:relative}.editor-mid .build-area .left .image-block{margin-bottom:2rem}.editor-mid .build-area .left .image-block .image-item{margin:1.25rem auto;width:18.75rem;border:.125rem solid #f1f1f1;border-radius:.25rem;overflow:hidden;height:12.6875rem}.editor-mid .build-area .left .image-block .image-item img{max-height:12.5rem}.editor-mid .build-area .left .image-block .image-item .loader-icon{font-size:40px}.editor-mid .build-area .left .image-block .button-area .upload-btn{background:#1e5dd3;border-radius:.125rem;width:11rem;height:2.25rem;position:relative}.editor-mid .build-area .left .image-block .button-area .upload-btn input[type=file]{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}.editor-mid .build-area .right{width:16rem}.editor-mid .build-area .right .quick-settings .heading{position:relative}.editor-mid .build-area .right .quick-settings .heading:before{background:#1e5dd3;content:\"\";position:absolute;left:0;top:.0625rem;width:.125rem;height:.875rem}.editor-mid .build-area .right .quick-settings .settings-list ul{list-style-type:none}.editor-mid .build-area .right .quick-settings .settings-list ul li{border-bottom:1px solid #F1F1F1}.editor-mid .build-area .right .quick-settings .settings-list ul li app-cs-switch .cs-switch{cursor:pointer}.editor-bottom{background:#1e5dd3;border-radius:0 0 .125rem .125rem;position:relative}.editor-bottom button{background:#fff;border:none;border-radius:.1125rem}.editor-bottom button.next-btn{height:1.75rem}.editor-bottom button.next-btn .plus-icon{border:.125rem solid #1e5dd3;border-radius:50%;width:1.125rem;height:1.125rem;line-height:1.125rem}.editor-bottom button.save-btn{width:4.75rem;height:1.75rem}.editor-bottom .next-question{background:#fff;border-radius:.25rem;box-shadow:0 -3px 6px #1e5dd326;position:absolute;bottom:0;left:0;z-index:9}.editor-bottom .next-question ::ng-deep app-question-type .question-type ul li{width:10rem!important}.editor-bottom .overlay{z-index:8}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CsSwitchComponent, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.SingleLineEditorComponent, selector: "app-single-line-editor", inputs: ["placeholder", "editorMode", "label", "id"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WelcomeThankyouComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-welcome-thankyou', template: "<div class=\"editor-wrapper vx-mb-4\" [class.error]=\"false\" #questionContainer>\n  <div\n    class=\"editor-top vx-d-flex vx-align-center vx-justify-center vx-pl-2 vx-pr-2\"\n  >\n    <div class=\"rightside-button vx-d-flex vx-align-center\">\n      <!-- deleteQuestion.emit();  -->\n      <button\n        class=\"delete-btn vx-fs-14 vx-txt-red vx-pl-2 vx-pr-2 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\"\n        (click)=\"deleteWelcome()\"\n      >\n        <i class=\"icons\">&#xe923;</i>\n      </button>\n    </div>\n  </div>\n  <div class=\"editor-mid vx-pl-5 vx-pr-5\">\n    <div class=\"build-area vx-d-flex vx-justify-between\">\n      <div class=\"left\">\n        <div class=\"image-block vx-d-block\" *ngIf=\"entityData.hasWelcomeImage\">\n          <div class=\"image-item vx-d-flex vx-align-center vx-justify-center\">\n            <img\n              *ngIf=\"entityData.welcomeImage == '' && !isImageUploading\"\n              [src]=\"ASSETS.placeholder\"\n            />\n            <img\n              *ngIf=\"entityData.welcomeImage != '' && !isImageUploading\"\n              [src]=\"entityData?.welcomeImage\"\n            />\n            <i *ngIf=\"isImageUploading\" class=\"icons loader-icon\">&#xe929;</i>\n          </div>\n          <div class=\"button-area vx-d-flex vx-justify-center\">\n            <label\n              class=\"upload-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\"\n            >\n              <input\n                type=\"file\"\n                accept=\"image/*\"\n                (change)=\"onSelectImage($event)\"\n              />\n              {{\n                entityData?.welcomeImage == \"\" ? \"Upload Image\" : \"Change Image\"\n              }}\n            </label>\n          </div>\n        </div>\n        <app-single-line-editor\n          [placeholder]=\"'Welcome Heading'\"\n          [label]=\"false\"\n          [editorMode]=\"'multiline'\"\n          [(ngModel)]=\"entityData.welcomeText\"\n        ></app-single-line-editor>\n        <app-single-line-editor\n          *ngIf=\"entityData?.hasWelcomeDescription\"\n          [placeholder]=\"'Welcome Description'\"\n          [label]=\"false\"\n          [editorMode]=\"'multiline'\"\n          [(ngModel)]=\"entityData.welcomeDescription\"\n        ></app-single-line-editor>\n      </div>\n      <div class=\"right\">\n        <div class=\"quick-settings\">\n          <div\n            class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\"\n          >\n            QUESTION SETTINGS\n          </div>\n          <div class=\"settings-list\">\n            <ul class=\"vx-p-0 vx-m-0\">\n              <li class=\"vx-pt-3 vx-pb-3\">\n                <app-cs-switch [(ngValue)]=\"entityData.hasWelcomeDescription\">\n                  <div\n                    class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\"\n                  >\n                    <div\n                      class=\"settings-name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\"\n                    >\n                      DESCRIPTION\n                    </div>\n                  </div>\n                </app-cs-switch>\n              </li>\n              <li class=\"vx-pt-3 vx-pb-3\">\n                <app-cs-switch [(ngValue)]=\"entityData.hasWelcomeImage\">\n                  <div\n                    class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\"\n                  >\n                    <div\n                      class=\"settings-name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\"\n                    >\n                      IMAGE\n                    </div>\n                  </div>\n                </app-cs-switch>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";.editor-wrapper{border:1px solid #1e5dd3;border-radius:.25rem;position:relative}.editor-wrapper .label-mode{background:#7aa6f7;border:1px solid #1e5dd3;border-left:none;border-radius:0 .125rem .125rem 0;writing-mode:vertical-lr;position:absolute;left:-1.0625rem;top:3rem;width:1rem;transform:rotate(180deg)}.editor-wrapper.error{border-color:#d93b41}.editor-wrapper.error .editor-bottom{background:#d93b41}.editor-wrapper.with-logic{border-color:#f0b819}.editor-wrapper.with-logic .label-mode{background:#f4c84a;border-color:#f0b819}.editor-top{background:#fbfbfb;border-bottom:1px solid #F1F1F1;border-radius:.25rem .25rem 0 0;height:2.75rem;position:relative}.editor-top .rightside-button{position:absolute;right:.5rem;top:.5rem}.editor-top .rightside-button button{background:#f1f1f1;border:none;border-radius:.125rem;height:1.75rem}.editor-top .rightside-button button.delete-btn{width:1.75rem}.editor-mid{padding-top:1.5rem;padding-bottom:1.5rem}.editor-mid .build-area .left{width:calc(100% - 17.5rem);position:relative}.editor-mid .build-area .left .image-block{margin-bottom:2rem}.editor-mid .build-area .left .image-block .image-item{margin:1.25rem auto;width:18.75rem;border:.125rem solid #f1f1f1;border-radius:.25rem;overflow:hidden;height:12.6875rem}.editor-mid .build-area .left .image-block .image-item img{max-height:12.5rem}.editor-mid .build-area .left .image-block .image-item .loader-icon{font-size:40px}.editor-mid .build-area .left .image-block .button-area .upload-btn{background:#1e5dd3;border-radius:.125rem;width:11rem;height:2.25rem;position:relative}.editor-mid .build-area .left .image-block .button-area .upload-btn input[type=file]{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}.editor-mid .build-area .right{width:16rem}.editor-mid .build-area .right .quick-settings .heading{position:relative}.editor-mid .build-area .right .quick-settings .heading:before{background:#1e5dd3;content:\"\";position:absolute;left:0;top:.0625rem;width:.125rem;height:.875rem}.editor-mid .build-area .right .quick-settings .settings-list ul{list-style-type:none}.editor-mid .build-area .right .quick-settings .settings-list ul li{border-bottom:1px solid #F1F1F1}.editor-mid .build-area .right .quick-settings .settings-list ul li app-cs-switch .cs-switch{cursor:pointer}.editor-bottom{background:#1e5dd3;border-radius:0 0 .125rem .125rem;position:relative}.editor-bottom button{background:#fff;border:none;border-radius:.1125rem}.editor-bottom button.next-btn{height:1.75rem}.editor-bottom button.next-btn .plus-icon{border:.125rem solid #1e5dd3;border-radius:50%;width:1.125rem;height:1.125rem;line-height:1.125rem}.editor-bottom button.save-btn{width:4.75rem;height:1.75rem}.editor-bottom .next-question{background:#fff;border-radius:.25rem;box-shadow:0 -3px 6px #1e5dd326;position:absolute;bottom:0;left:0;z-index:9}.editor-bottom .next-question ::ng-deep app-question-type .question-type ul li{width:10rem!important}.editor-bottom .overlay{z-index:8}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.Configurations, decorators: [{
                    type: Optional
                }] }]; }, propDecorators: { deleteQuestion: [{
                type: Output
            }], service: [{
                type: Input
            }], allEntityData: [{
                type: Input,
                args: ['entityData']
            }] } });
//# sourceMappingURL=data:application/json;base64, 