import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Input, Output, NgModule } from '@angular/core';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { DeviceDetectorService } from 'ngx-device-detector';
import { MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { Subscription } from 'rxjs';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { SdButtonModule } from '@sd-angular/core/button';

class SdModal {
    constructor(ref, dialog, bottomSheet, deviceService) {
        this.ref = ref;
        this.dialog = dialog;
        this.bottomSheet = bottomSheet;
        this.height = 'auto';
        this.lazyLoadContent = true;
        this.sdClosed = new EventEmitter();
        this.isOpened = false;
        this.alreadyOpened = false;
        this.isMobileOrTablet = false;
        this.subcription = new Subscription();
        this.open = () => {
            if (this.isOpened) {
                return;
            }
            this.ref.markForCheck();
            this.alreadyOpened = true;
            this.isOpened = true;
            if ((!this.view && this.isMobileOrTablet) || this.view === 'bottomSheet') {
                this.bottomSheetRef = this.bottomSheet.open(this.templateRef);
                this.subcription.add(this.bottomSheetRef.afterDismissed().subscribe(() => {
                    this.isOpened = false;
                    this.sdClosed.emit();
                }));
            }
            else {
                this.dialogRef = this.dialog.open(this.templateRef, {
                    width: this.width,
                    maxWidth: this.width,
                    disableClose: !this.closeClickOutSide // mặc định ko cho đóng modal khi click out side
                });
                this.subcription.add(this.dialogRef.afterClosed().subscribe(() => {
                    this.isOpened = false;
                    this.sdClosed.emit();
                }));
            }
        };
        this.close = () => {
            var _a, _b;
            this.ref.markForCheck();
            (_a = this.bottomSheetRef) === null || _a === void 0 ? void 0 : _a.dismiss();
            (_b = this.dialogRef) === null || _b === void 0 ? void 0 : _b.close();
        };
        this.isMobileOrTablet = !deviceService.isDesktop();
    }
    ngOnInit() {
        this.type = this.type || 'primary';
        this.width = this.width || '80vw';
        if (!this.isMobileOrTablet) {
            switch (this.width) {
                case 'lg':
                    this.width = '80vw';
                    break;
                case 'md':
                    this.width = '60vw';
                    break;
                case 'sm':
                    this.width = '40vw';
                    break;
            }
        }
    }
    ngOnDestroy() {
        this.subcription.unsubscribe();
    }
}
SdModal.index = 0;
SdModal.decorators = [
    { type: Component, args: [{
                selector: 'sd-modal',
                template: "<ng-template #templateRef>\r\n  <ng-container *ngIf=\"!lazyLoadContent || alreadyOpened\">\r\n    <sd-modal-header *ngIf=\"title\">\r\n      <span [innerHtml]=\"title\"></span>\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n        <button *ngIf=\"!noClose\" type=\"button\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </sd-modal-header>\r\n    <div class=\"d-flex flex-column px-12 px-md-24 pb-6 overflow-auto w-100 mh-100\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>",
                encapsulation: ViewEncapsulation.None,
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{margin-bottom:0;min-height:auto;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{display:block;padding:12px 24px;width:100%}@media (max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{border-top-left-radius:4px;border-top-right-radius:4px;box-sizing:border-box;display:flex;flex-direction:column;max-height:80vh;min-width:100vw;outline:0;overflow:hidden;padding:0}"]
            },] }
];
SdModal.ctorParameters = () => [
    { type: ChangeDetectorRef },
    { type: MatDialog },
    { type: MatBottomSheet },
    { type: DeviceDetectorService }
];
SdModal.propDecorators = {
    templateRef: [{ type: ViewChild, args: ['templateRef',] }],
    title: [{ type: Input }],
    noClose: [{ type: Input }],
    type: [{ type: Input }],
    width: [{ type: Input }],
    height: [{ type: Input }],
    view: [{ type: Input }],
    lazyLoadContent: [{ type: Input }],
    closeClickOutSide: [{ type: Input }],
    sdClosed: [{ type: Output }],
    modal: [{ type: ViewChild, args: ['modal',] }]
};

class SdModalHeader {
    constructor(deviceService) {
        this.isMobileOrTablet = false;
        this.isMobileOrTablet = !deviceService.isDesktop();
    }
    ngOnInit() {
    }
}
SdModalHeader.decorators = [
    { type: Component, args: [{
                selector: 'sd-modal-header',
                template: "<h3 class=\"mb-0\" mat-dialog-title *ngIf=\"!isMobileOrTablet\">\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</h3>\r\n<sd-bottom-sheet-header *ngIf=\"isMobileOrTablet\">\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</sd-bottom-sheet-header>\r\n<ng-template #content>\r\n  <ng-content></ng-content>\r\n</ng-template>",
                encapsulation: ViewEncapsulation.None,
                styles: [".mat-dialog-title{align-items:center;display:flex;justify-content:space-between}button:focus{outline:none!important}"]
            },] }
];
SdModalHeader.ctorParameters = () => [
    { type: DeviceDetectorService }
];

class SdModalBody {
    constructor(deviceService) {
        this.height = 'auto';
        this.isMobileOrTablet = false;
        this.isMobileOrTablet = !deviceService.isDesktop();
    }
    ngOnInit() {
    }
}
SdModalBody.decorators = [
    { type: Component, args: [{
                selector: 'sd-modal-body',
                template: "<mat-dialog-content *ngIf=\"!isMobileOrTablet\" [ngStyle]=\"{'height': height}\" class=\"pb-5\">\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</mat-dialog-content>\r\n<sd-bottom-sheet-body *ngIf=\"isMobileOrTablet\" [height]=\"height\">\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</sd-bottom-sheet-body>\r\n<ng-template #content>\r\n  <ng-content></ng-content>\r\n</ng-template>",
                styles: [":host{width:100%}"]
            },] }
];
SdModalBody.ctorParameters = () => [
    { type: DeviceDetectorService }
];
SdModalBody.propDecorators = {
    height: [{ type: Input }]
};

class SdModalFooter {
    constructor(deviceService) {
        this.isMobileOrTablet = false;
        this.isMobileOrTablet = !deviceService.isDesktop();
    }
    ngOnInit() {
    }
}
SdModalFooter.decorators = [
    { type: Component, args: [{
                selector: 'sd-modal-footer',
                template: "<!-- <div class=\"modal-footer\" style=\"padding:5px\"><ng-content></ng-content></div> -->\r\n<mat-dialog-actions *ngIf=\"!isMobileOrTablet\">\r\n  <div class=\"c-footer\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  </div>\r\n</mat-dialog-actions>\r\n<sd-bottom-sheet-footer *ngIf=\"isMobileOrTablet\">\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</sd-bottom-sheet-footer>\r\n<ng-template #content>\r\n  <ng-content></ng-content>\r\n</ng-template>",
                styles: [":host{width:100%}:host .c-footer{align-items:center;display:flex;flex:auto;justify-content:flex-end;padding:8px 0}"]
            },] }
];
SdModalFooter.ctorParameters = () => [
    { type: DeviceDetectorService }
];

class SdBottomSheet {
    constructor(bottomSheet) {
        this.bottomSheet = bottomSheet;
        this.isOpened = false;
        this.open = () => {
            this.isOpened = true;
            this.bottomSheet.open(this.templateRef);
        };
        this.close = () => {
            this.bottomSheet.dismiss();
        };
    }
}
SdBottomSheet.decorators = [
    { type: Component, args: [{
                selector: 'sd-bottom-sheet',
                template: "<ng-template #templateRef>\r\n  <ng-container *ngIf=\"isOpened\">\r\n    <sd-bottom-sheet-header *ngIf=\"title\">{{title}}</sd-bottom-sheet-header>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>"
            },] }
];
SdBottomSheet.ctorParameters = () => [
    { type: MatBottomSheet }
];
SdBottomSheet.propDecorators = {
    templateRef: [{ type: ViewChild, args: ['templateRef',] }],
    title: [{ type: Input }]
};

class SdBottomSheetHeader {
    constructor() { }
    ngOnInit() {
    }
}
SdBottomSheetHeader.decorators = [
    { type: Component, args: [{
                selector: 'sd-bottom-sheet-header',
                template: "<h3 class=\"mb-0\" mat-dialog-title><ng-content></ng-content></h3>"
            },] }
];
SdBottomSheetHeader.ctorParameters = () => [];

class SdBottomSheetBody {
    constructor() {
        this.height = 'auto';
    }
    ngOnInit() {
    }
}
SdBottomSheetBody.decorators = [
    { type: Component, args: [{
                selector: 'sd-bottom-sheet-body',
                template: "<div [ngStyle]=\"{'height': height}\">\r\n  <ng-content></ng-content>\r\n<div>"
            },] }
];
SdBottomSheetBody.ctorParameters = () => [];
SdBottomSheetBody.propDecorators = {
    height: [{ type: Input }]
};

class SdBottomSheetFooter {
    constructor() { }
    ngOnInit() {
    }
}
SdBottomSheetFooter.decorators = [
    { type: Component, args: [{
                selector: 'sd-bottom-sheet-footer',
                template: "<!-- <div class=\"modal-footer\" style=\"padding:5px\"><ng-content></ng-content></div> -->\r\n<div class=\"c-footer\">\r\n  <ng-content></ng-content>\r\n</div>",
                styles: [".c-footer{align-items:center;display:flex;flex:auto;justify-content:flex-end;padding-bottom:5px;padding-top:5px}"]
            },] }
];
SdBottomSheetFooter.ctorParameters = () => [];

class SdModalModule {
}
SdModalModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatIconModule,
                    MatBottomSheetModule,
                    MatDialogModule,
                    MatButtonModule,
                    SdButtonModule
                ],
                declarations: [
                    SdModal,
                    SdModalHeader,
                    SdModalBody,
                    SdModalFooter,
                    SdBottomSheet,
                    SdBottomSheetHeader,
                    SdBottomSheetBody,
                    SdBottomSheetFooter
                ],
                exports: [
                    SdModal,
                    SdModalHeader,
                    SdModalBody,
                    SdModalFooter,
                    SdBottomSheet,
                    SdBottomSheetHeader,
                    SdBottomSheetBody,
                    SdBottomSheetFooter
                ],
                providers: []
            },] }
];

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

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

export { SdBottomSheet, SdBottomSheetBody, SdBottomSheetFooter, SdBottomSheetHeader, SdModal, SdModalBody, SdModalFooter, SdModalHeader, SdModalModule };
//# sourceMappingURL=sd-angular-core-modal.js.map
