import { Component, Input, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../../../ui-kit/snack-bar/snack-bar.service";
import * as i2 from "@angular/common";
import * as i3 from "../../../../ui-kit/tooltip/tooltip.directive";
import * as i4 from "../../../../ui-kit/popover/popover.component";
import * as i5 from "../../../../ui-kit/popover/popover.directive";
import * as i6 from "../pipes/question-page-filter.pipe";
export class MoveComponent {
    constructor(snackbar) {
        this.snackbar = snackbar;
        this.openPortal = '';
        this.currentPage = 1;
        this.position = 'After';
        this.positions = ['After', 'Before'];
    }
    ngOnInit() {
    }
    setSelectedQuestion(evt) {
        this.selectedQuestion = this.service.formsPage.elements.findIndex((x) => x.name === evt);
        if (this.selectedQuestion > -1) {
            this.questionDetail = this.service.formsPage.elements[this.selectedQuestion];
        }
    }
    move() {
        let nextIndex;
        const message = 'The question has been moved.';
        if (this.selectedQuestion !== undefined) {
            if (this.position === 'Before') {
                if (this.questionIndex >= this.selectedQuestion) {
                    nextIndex = this.selectedQuestion;
                    this.service.activeQuestion = nextIndex;
                    if (nextIndex === 0) {
                        // ' of page ' ${this.currentPage}
                        // message = `Question moved to position ' ${nextIndex + 1}  `;
                    }
                    else {
                        // message = `Question moved to position ' ${nextIndex}`;
                    }
                }
                else {
                    nextIndex = this.selectedQuestion - 1;
                    this.service.activeQuestion = nextIndex;
                    // message = `Question moved to position ' ${nextIndex + 1}`;
                }
            }
            if (this.position === 'After') {
                if (this.questionIndex > this.selectedQuestion) {
                    nextIndex = this.selectedQuestion + 1;
                    this.service.activeQuestion = nextIndex;
                    // message = `Question moved to position ' ${nextIndex + 1}`;
                }
                else {
                    nextIndex = this.selectedQuestion;
                    this.service.activeQuestion = nextIndex;
                    // message = `Question moved to position ' ${nextIndex + 1}`;
                }
            }
            this.service.formsPage.elements[this.questionIndex].page = this.currentPage;
            this.service.moveQuestion(this.questionIndex, nextIndex);
            //  this.snackbar.snackbar.next(message);
            this.snackbar.show(message, 'success');
            setTimeout(() => {
                this.moveElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }, 400);
        }
        else {
            this.snackbar.show('Please select a reference question to move', 'alert');
        }
    }
    onPageChange(evt) {
        if (![...new Set(this.service.formsPage.elements.map((element) => element.page))].includes(evt)) {
            this.emptyPage = true;
        }
        else {
            this.emptyPage = false;
        }
    }
    changePage(evt) {
        this.currentPage = evt;
    }
    changePosition(evt) {
        this.position = evt;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MoveComponent, deps: [{ token: i1.SnackBarService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MoveComponent, selector: "app-move", inputs: { questionIndex: "questionIndex", question: "question", service: "service", openPortal: "openPortal" }, viewQueries: [{ propertyName: "moveElement", first: true, predicate: ["moveTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"move-area\">\n    <div class=\"move-heading vx-fs-13 vx-paragraph-txt vx-mb-4\">Move the question to</div>\n    <div class=\"vx-d-flex\">\n        <div *ngIf=\"openPortal !== 'RESPONSIBILITY_CHECKPOINT'\"  class=\"move-item vx-mr-3\">\n            <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SELECT PAGE</div>\n            <div class=\"select-box vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3\" appPopover (click)=\"pageAction.popover()\" placement=\"right\">\n                <span class=\"value vx-fs-13 vx-paragraph-txt\">{{currentPage}}</span>\n                <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n            </div>\n            <app-popover #pageAction>\n                <div class=\"move-popup\">\n                    <ul class=\"vx-p-0 vx-m-0\">\n                        <li *ngFor=\"let data of service?.allPages\">\n                            <button  (click)=\"onPageChange(data);changePage(data)\" class=\"vx-fs-13 vx-paragraph-txt vx-p-2 vx-pl-3 vx-m-0 vx-d-flex vx-align-center vx-w-100\">{{data}}</button>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"move-item vx-mr-3\">\n            <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SELECT POSITION</div>\n            <div class=\"select-box vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3\" appPopover (click)=\"positionAction.popover()\" placement=\"right\">\n                <span class=\"value vx-fs-13 vx-paragraph-txt\">{{position}}</span>\n                <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n            </div>\n            <app-popover #positionAction>\n                <div class=\"move-popup\">\n                    <ul class=\"vx-p-0 vx-m-0\">\n                        <li *ngFor =\"let position of positions\">\n                            <button (click)=\"changePosition(position)\" class=\"vx-fs-13 vx-paragraph-txt vx-p-2 vx-pl-3 vx-m-0 vx-d-flex vx-align-center vx-w-100\">{{position}}</button>\n                        </li>\n\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"move-item vx-mr-3\">\n            <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SELECT QUESTION</div>\n            <div class=\"select-box vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3\" appPopover (click)=\"questionAction.popover()\" placement=\"right\">\n                <span class=\"value vx-fs-13 vx-paragraph-txt\"> {{questionDetail?.title ? questionDetail?.title:'Select question'}}</span>\n                <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n            </div>\n            <app-popover #questionAction>\n                <div class=\"move-popup\">\n                    <ul class=\"vx-p-0 vx-m-0\">\n                        <li *ngFor=\"let data of (service.formsPage.elements  | questionPageFilter : currentPage)\">\n                            <button class=\"vx-p-2 vx-pl-3 vx-m-0 vx-d-flex vx-align-center vx-w-100\" (click)=\"setSelectedQuestion(data?.name)\">\n                                <span class=\"vx-fs-13 vx-paragraph-txt\" [appTooltip]=\"data?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.title}}</span>\n                            </button>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"move-item vx-mr-3\">\n            <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5\"></div>\n            <button class=\"move\" appRipple (click)=\"move()\">Move</button>\n        </div>\n        <p class=\"error-mgs\" *ngIf=\"emptyPage===true\">\n            Selected page doesn't contains any question.\n        </p>\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\";.move-area .move-item{width:15rem}.move-area .move-item .select-box{border:1px solid #DBDBDB;border-radius:.25rem;height:2.25rem;cursor:pointer}.move-popup{background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:.25rem;width:15rem;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}.move-popup ul{list-style-type:none;max-height:10rem;overflow-y:auto}.move-popup ul li{border-bottom:1px solid #F1F1F1}.move-popup ul li:only-child,.move-popup ul li:last-of-type{border-bottom:none}.move-popup ul li button{background:transparent;border:none;border-radius:0;text-align:left}.move-popup ul li button span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.move-popup ul li:hover{background:#f1f1f1}.error-mgs{font-size:12px;color:#d93b41;margin-top:5px!important}.move{height:36px;padding:0 25px;border-radius:4px;border:1px solid #1e5dd3;background:#1e5dd3;cursor:pointer;outline:none;color:#fff;font-weight:500;font-size:11px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i4.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "pipe", type: i6.QuestionPageFilterPipe, name: "questionPageFilter" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MoveComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-move', template: "<div class=\"move-area\">\n    <div class=\"move-heading vx-fs-13 vx-paragraph-txt vx-mb-4\">Move the question to</div>\n    <div class=\"vx-d-flex\">\n        <div *ngIf=\"openPortal !== 'RESPONSIBILITY_CHECKPOINT'\"  class=\"move-item vx-mr-3\">\n            <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SELECT PAGE</div>\n            <div class=\"select-box vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3\" appPopover (click)=\"pageAction.popover()\" placement=\"right\">\n                <span class=\"value vx-fs-13 vx-paragraph-txt\">{{currentPage}}</span>\n                <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n            </div>\n            <app-popover #pageAction>\n                <div class=\"move-popup\">\n                    <ul class=\"vx-p-0 vx-m-0\">\n                        <li *ngFor=\"let data of service?.allPages\">\n                            <button  (click)=\"onPageChange(data);changePage(data)\" class=\"vx-fs-13 vx-paragraph-txt vx-p-2 vx-pl-3 vx-m-0 vx-d-flex vx-align-center vx-w-100\">{{data}}</button>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"move-item vx-mr-3\">\n            <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SELECT POSITION</div>\n            <div class=\"select-box vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3\" appPopover (click)=\"positionAction.popover()\" placement=\"right\">\n                <span class=\"value vx-fs-13 vx-paragraph-txt\">{{position}}</span>\n                <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n            </div>\n            <app-popover #positionAction>\n                <div class=\"move-popup\">\n                    <ul class=\"vx-p-0 vx-m-0\">\n                        <li *ngFor =\"let position of positions\">\n                            <button (click)=\"changePosition(position)\" class=\"vx-fs-13 vx-paragraph-txt vx-p-2 vx-pl-3 vx-m-0 vx-d-flex vx-align-center vx-w-100\">{{position}}</button>\n                        </li>\n\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"move-item vx-mr-3\">\n            <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SELECT QUESTION</div>\n            <div class=\"select-box vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3\" appPopover (click)=\"questionAction.popover()\" placement=\"right\">\n                <span class=\"value vx-fs-13 vx-paragraph-txt\"> {{questionDetail?.title ? questionDetail?.title:'Select question'}}</span>\n                <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n            </div>\n            <app-popover #questionAction>\n                <div class=\"move-popup\">\n                    <ul class=\"vx-p-0 vx-m-0\">\n                        <li *ngFor=\"let data of (service.formsPage.elements  | questionPageFilter : currentPage)\">\n                            <button class=\"vx-p-2 vx-pl-3 vx-m-0 vx-d-flex vx-align-center vx-w-100\" (click)=\"setSelectedQuestion(data?.name)\">\n                                <span class=\"vx-fs-13 vx-paragraph-txt\" [appTooltip]=\"data?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.title}}</span>\n                            </button>\n                        </li>\n                    </ul>\n                </div>\n            </app-popover>\n        </div>\n        <div class=\"move-item vx-mr-3\">\n            <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5\"></div>\n            <button class=\"move\" appRipple (click)=\"move()\">Move</button>\n        </div>\n        <p class=\"error-mgs\" *ngIf=\"emptyPage===true\">\n            Selected page doesn't contains any question.\n        </p>\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\";.move-area .move-item{width:15rem}.move-area .move-item .select-box{border:1px solid #DBDBDB;border-radius:.25rem;height:2.25rem;cursor:pointer}.move-popup{background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:.25rem;width:15rem;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}.move-popup ul{list-style-type:none;max-height:10rem;overflow-y:auto}.move-popup ul li{border-bottom:1px solid #F1F1F1}.move-popup ul li:only-child,.move-popup ul li:last-of-type{border-bottom:none}.move-popup ul li button{background:transparent;border:none;border-radius:0;text-align:left}.move-popup ul li button span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.move-popup ul li:hover{background:#f1f1f1}.error-mgs{font-size:12px;color:#d93b41;margin-top:5px!important}.move{height:36px;padding:0 25px;border-radius:4px;border:1px solid #1e5dd3;background:#1e5dd3;cursor:pointer;outline:none;color:#fff;font-weight:500;font-size:11px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.SnackBarService }]; }, propDecorators: { questionIndex: [{
                type: Input
            }], question: [{
                type: Input
            }], service: [{
                type: Input
            }], openPortal: [{
                type: Input
            }], moveElement: [{
                type: ViewChild,
                args: ['moveTemplate']
            }] } });
//# sourceMappingURL=data:application/json;base64, 