import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
import { EventEmitter, Component, ChangeDetectionStrategy, ComponentFactoryResolver, ApplicationRef, Injector, ChangeDetectorRef, ViewChild, Input, Output, NgModule } from '@angular/core';
import { DomPortalOutlet, CdkPortal, PortalModule } from '@angular/cdk/portal';
import { v4 } from 'uuid';
import { SdLoadingService } from '@sd-angular/core/loading';
import $ from 'jquery';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { SdButtonModule } from '@sd-angular/core/button';

var _embeddedViewRef, _drawMiniumBar;
class SdModalResizable {
    constructor(cfr, ar, injector, ref, loadingService) {
        this.cfr = cfr;
        this.ar = ar;
        this.injector = injector;
        this.ref = ref;
        this.loadingService = loadingService;
        this.id = `I${v4()}`;
        this.width = '480px';
        this.editingChanged = new EventEmitter();
        _embeddedViewRef.set(this, void 0);
        this.isEditing = false;
        this.isOpened = false;
        this.isHover = false;
        this.isLoading = false;
        this.isMinium = false;
        this.isFullscreen = false;
        this.open = () => {
            this.ref.markForCheck();
            this.isOpened = true;
            // console.log('OPEN isMinium' + this.id, this.isMinium);
            // tinh toan width maxium lần đầu khi không ở trạng thái minium
            if (!$('#' + this.id).hasClass('c-minium')) {
                setTimeout(() => {
                    const maxiumWidth = $('#' + this.id).width();
                    if (maxiumWidth > 0) {
                        $('#' + this.id).attr('data-width', maxiumWidth);
                    }
                    $('#' + this.id).removeClass('c-closed');
                }, 100);
            }
            this.maxium();
        };
        this.close = () => {
            this.ref.markForCheck();
            this.isOpened = false;
            setTimeout(() => {
                $('#' + this.id).css({ width: '0px', right: '0px' }).removeClass('c-minium').addClass('c-closed');
            }, 100);
            this.stopLoading();
            __classPrivateFieldGet(this, _drawMiniumBar).call(this);
        };
        this.minium = () => {
            this.ref.markForCheck();
            this.isMinium = true;
            // console.log('MINIUM isMinium' + this.id, this.isMinium);
            __classPrivateFieldGet(this, _drawMiniumBar).call(this);
        };
        this.maxium = () => {
            this.ref.markForCheck();
            this.isMinium = false;
            // console.log('MAXIUM isMinium' + this.id, this.isMinium);
            __classPrivateFieldGet(this, _drawMiniumBar).call(this);
        };
        this.changeFullScreen = () => {
            this.ref.markForCheck();
            this.isFullscreen = !this.isFullscreen;
            __classPrivateFieldGet(this, _drawMiniumBar).call(this);
        };
        _drawMiniumBar.set(this, () => {
            setTimeout(() => {
                let totalRight = 0;
                const miniumWidth = 300;
                $('.modal-custom').each((index, item) => {
                    if ($(item).hasClass('c-minium')) {
                        $(item).css({ width: miniumWidth + 'px', right: totalRight + 'px' });
                        totalRight += miniumWidth + 8;
                    }
                    else if (!$(item).hasClass('c-closed')) {
                        const maxiumWidth = parseInt($(item).attr('data-width'), 0);
                        if (!isNaN(maxiumWidth)) {
                            if ($(item).hasClass('c-fullscreen')) {
                                $(item).css({ width: 'calc(100% - 16px)', right: '8px' });
                            }
                            else {
                                $(item).css({ width: maxiumWidth + 'px', right: totalRight + 'px' });
                            }
                            totalRight += maxiumWidth + 8;
                        }
                    }
                });
            }, 200);
        });
        this.startLoading = () => {
            this.isLoading = true;
            this.loadingService.stop();
            this.loadingService.start(`#${this.id}`);
        };
        this.stopLoading = () => {
            this.isLoading = false;
            this.loadingService.stop();
        };
    }
    ngAfterViewInit() {
        __classPrivateFieldSet(this, _embeddedViewRef, new DomPortalOutlet(document.body, this.cfr, this.ar, this.injector).attachTemplatePortal(this.portal));
    }
    ngOnDestroy() {
        __classPrivateFieldGet(this, _embeddedViewRef).destroy();
    }
    toggleEditable() {
        this.isEditing = !this.isEditing;
        this.editingChanged.emit(this.isEditing);
    }
}
_embeddedViewRef = new WeakMap(), _drawMiniumBar = new WeakMap();
SdModalResizable.decorators = [
    { type: Component, args: [{
                selector: 'sd-modal-resizable',
                template: "<ng-template cdkPortal>\r\n  <div [id]=\"id\" class=\"modal-custom\" [ngStyle]=\"{'width': width}\"\r\n    [ngClass]=\"{'modal-custom--active': isOpened,'modal-custom--loading': isLoading\r\n    , 'c-minium': isMinium, 'c-fullscreen': isFullscreen}\"\r\n    (mouseover)=\"isHover = true\" (mouseout)=\"isHover = false\">\r\n    <ng-container *ngIf=\"isOpened\">\r\n      <div class=\"modal-custom__header media align-items-center\">\r\n        <div class=\"modal-custom__title media-body\">\r\n          <ng-content select=\"[sdTitle]\"></ng-content>\r\n        </div>\r\n        <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minium()\" *ngIf=\"!isMinium\" mat-icon-button\r\n          title=\"Thu nh\u1ECF\">\r\n          <mat-icon>remove</mat-icon>\r\n        </button>\r\n        <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maxium()\" *ngIf=\"isMinium\" mat-icon-button\r\n          title=\"Ph\u00F3ng to\">\r\n          <mat-icon>remove</mat-icon>\r\n        </button>\r\n        <button type=\"button\" class=\"c-action--white\" (click)=\"changeFullScreen()\" *ngIf=\"!isFullscreen\" mat-icon-button\r\n                title=\"To\u00E0n m\u00E0n h\u00ECnh\">\r\n          <mat-icon>open_in_full</mat-icon>\r\n        </button>\r\n        <button type=\"button\" class=\"c-action--white\" (click)=\"changeFullScreen()\" *ngIf=\"isFullscreen\" mat-icon-button\r\n                title=\"Tho\u00E1t to\u00E0n m\u00E0n h\u00ECnh\">\r\n          <mat-icon>fullscreen_exit</mat-icon>\r\n        </button>\r\n        <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"\u0110\u00F3ng\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"isOpened\" class=\"modal-custom__body\">\r\n        <div class=\"modal-custom__content\">\r\n          <ng-content select=\"[sdBody]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"modal-custom__footer\">\r\n        <ng-content select=\"[sdFooter]\"></ng-content>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [".text-black400{color:#757575}.modal-custom{background-color:#fff;border-radius:4px 4px 0 0;bottom:0;box-shadow:0 .4px .8px rgba(0,0,0,.1),0 3px 6px rgba(0,0,0,.2);display:flex;flex-direction:column;opacity:0;pointer-events:none;position:fixed;right:12px;top:80px;transform:translate3d(0,100%,0);transition:all .3s ease-in-out;visibility:hidden;z-index:998}.modal-custom button.c-action--white:focus{outline:none!important}.modal-custom.c-minium-of-list{bottom:0;opacity:1;pointer-events:all;top:auto;transform:translateZ(0);visibility:visible}.modal-custom.c-minium{top:auto!important;z-index:998!important}.modal-custom.c-minium .modal-custom__body,.modal-custom.c-minium .modal-custom__footer{display:none}.modal-custom.c-fullscreen{top:0;z-index:999}.c-action{color:#212121}.c-action:focus{outline:none}.c-action--white{color:#fff}.c-action--white.c-min{margin-bottom:-12px}.c-action--white.c-max{margin-top:-12px}.modal-custom__icon{background:transparent;border:0;color:#212121;outline:none;overflow:hidden}.modal-custom__icon .mat-icon{float:left}.modal-custom__header{background-color:#5d6165;border-radius:4px 4px 0 0;color:#fff;min-height:40px;padding:0 16px}.modal-custom__body{flex:1;position:relative}.modal-custom__content{bottom:0;left:0;overflow:auto;padding:8px 16px 16px;position:absolute;right:0;top:0}.modal-custom__footer{border-top:1px solid #dde0e5;padding:5px 0}.modal-custom-backdrop{background:none;border:0;bottom:0;height:100%;left:0;outline:none!important;position:fixed;right:0;top:0;transition:all .3s ease-in-out;width:100%;z-index:99}.modal-custom-backdrop--active{background-color:rgba(0,0,0,.4)}.modal-custom--active{opacity:1;pointer-events:all;transform:translateZ(0);visibility:visible}.modal-custom__title{font-size:14px;font-weight:500;line-height:20px}"]
            },] }
];
SdModalResizable.ctorParameters = () => [
    { type: ComponentFactoryResolver },
    { type: ApplicationRef },
    { type: Injector },
    { type: ChangeDetectorRef },
    { type: SdLoadingService }
];
SdModalResizable.propDecorators = {
    portal: [{ type: ViewChild, args: [CdkPortal,] }],
    editable: [{ type: Input }],
    width: [{ type: Input }],
    editingChanged: [{ type: Output }]
};

class SdModalResizableModule {
}
SdModalResizableModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatIconModule,
                    MatDialogModule,
                    MatButtonModule,
                    SdButtonModule,
                    PortalModule
                ],
                declarations: [
                    SdModalResizable
                ],
                exports: [
                    SdModalResizable
                ],
                providers: []
            },] }
];

/*
 * Public API Surface of superdev-angular-core
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SdModalResizable, SdModalResizableModule };
//# sourceMappingURL=sd-angular-core-modal-resizable.js.map
