import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Inject, Input, Output, NgModule } from '@angular/core';
import { ButtonModule } from 'ng-devui/button';

const DEFAULT_MODE = 'immersive';
const DEFAULT_ZINDEX = 10;
const ESC_KEYCODE = 27;

class FullscreenComponent {
    constructor(elementRef, doc) {
        this.elementRef = elementRef;
        this.doc = doc;
        this.isFullscreen = false;
        this.mode = DEFAULT_MODE;
        this.zIndex = DEFAULT_ZINDEX;
        this.fullscreenLaunch = new EventEmitter();
        this.onFullScreenChange = (event) => {
            if (this.currentTarget) {
                const targetElement = this.currentTarget;
                if (this.doc.fullscreenElement || this.doc.msFullscreenElement || this.doc.webkitFullscreenElement) { // 进入全屏
                    this.addFullScreenStyle();
                    this.launchNormalFullscreen(targetElement);
                }
                else { // 退出全屏
                    this.removeFullScreenStyle();
                    this.currentTarget = null;
                    this.exitNormalFullscreen(targetElement);
                }
                // F11退出全屏时，需要将全屏状态传出去
                const isFullscreen = !!(this.doc.fullscreenElement || this.doc.msFullscreenElement || this.doc.webkitFullscreenElement);
                this.fullscreenLaunch.emit({
                    isFullscreen
                });
                this.isFullscreen = isFullscreen;
            }
        };
        this.handleFullscreen = async () => {
            const targetElement = this.elementRef.nativeElement.querySelector('[fullscreen-target]');
            let isFullscreen;
            if (this.mode === 'normal') {
                const fullscreen = targetElement.classList.contains('fullscreen');
                if (!fullscreen) { // 进入全屏
                    this.addFullScreenStyle();
                    this.launchNormalFullscreen(targetElement);
                    isFullscreen = true;
                }
                else { // 退出全屏
                    this.removeFullScreenStyle();
                    this.exitNormalFullscreen(targetElement);
                    isFullscreen = false;
                }
            }
            else {
                this.currentTarget = targetElement;
                if (this.doc.fullscreenElement || this.doc.msFullscreenElement || this.doc.webkitFullscreenElement) {
                    isFullscreen = await this.exitImmersiveFullScreen(this.doc);
                }
                else {
                    isFullscreen = await this.launchImmersiveFullScreen(this.doc.documentElement);
                }
            }
            this.isFullscreen = isFullscreen;
            this.fullscreenLaunch.emit({
                isFullscreen
            });
        };
        this.handleKeyDown = (event) => {
            if (event.keyCode === ESC_KEYCODE) { // 按ESC键退出全屏
                if (this.isFullscreen) {
                    const targetElement = this.elementRef.nativeElement.querySelector('[fullscreen-target]');
                    if (this.mode === 'normal') {
                        this.removeFullScreenStyle();
                        this.exitNormalFullscreen(targetElement);
                    }
                    else {
                        if (this.doc.fullscreenElement) {
                            this.exitImmersiveFullScreen(this.doc);
                        }
                    }
                    this.fullscreenLaunch.emit({
                        isFullscreen: false
                    });
                    this.isFullscreen = false;
                }
            }
        };
        this.document = this.doc;
    }
    ngOnInit() {
        this.document.addEventListener('fullscreenchange', this.onFullScreenChange);
        this.document.addEventListener('MSFullscreenChange', this.onFullScreenChange);
        this.document.addEventListener('webkitfullscreenchange', this.onFullScreenChange);
        this.document.addEventListener('keydown', this.handleKeyDown);
    }
    ngAfterViewInit() {
        const btnLaunch = this.elementRef.nativeElement.querySelector('[fullscreen-launch]');
        if (btnLaunch) {
            btnLaunch.addEventListener('click', this.handleFullscreen);
        }
    }
    launchNormalFullscreen(targetElement) {
        targetElement.classList.add('fullscreen');
        if (this.zIndex) {
            targetElement.setAttribute('style', `z-index: ${this.zIndex}`);
        }
    }
    exitNormalFullscreen(targetElement) {
        targetElement.classList.remove('fullscreen');
        targetElement.style.zIndex = null;
    }
    async launchImmersiveFullScreen(docElement) {
        let fullscreenLaunch;
        if (docElement.requestFullscreen) {
            fullscreenLaunch = docElement.requestFullscreen();
        }
        else if (docElement.mozRequestFullScreen) {
            fullscreenLaunch = docElement.mozRequestFullScreen();
        }
        else if (docElement.webkitRequestFullScreen) {
            fullscreenLaunch = Promise.resolve(docElement.webkitRequestFullScreen());
        }
        else if (docElement.msRequestFullscreen) {
            fullscreenLaunch = Promise.resolve(docElement.msRequestFullscreen());
        }
        return await fullscreenLaunch.then(() => !!this.doc.fullscreenElement);
    }
    async exitImmersiveFullScreen(doc) {
        let fullscreenExit;
        if (doc.exitFullscreen) {
            fullscreenExit = doc.exitFullscreen();
        }
        else if (doc.mozCancelFullScreen) {
            fullscreenExit = doc.mozCancelFullScreen();
        }
        else if (doc.webkitCancelFullScreen) {
            fullscreenExit = Promise.resolve(doc.webkitCancelFullScreen());
        }
        else if (doc.msExitFullscreen) {
            fullscreenExit = Promise.resolve(doc.msExitFullscreen());
        }
        return await fullscreenExit.then(() => !!this.doc.fullscreenElement);
    }
    ngOnDestroy() {
        this.document.removeEventListener('fullscreenchange', this.onFullScreenChange);
        this.document.removeEventListener('MSFullscreenChange', this.onFullScreenChange);
        this.document.removeEventListener('webkitfullscreenchange', this.onFullScreenChange);
        this.document.removeEventListener('keydown', this.handleKeyDown);
        const btnLaunch = this.elementRef.nativeElement.querySelector('[fullscreen-launch]');
        if (btnLaunch) {
            btnLaunch.removeEventListener('click', this.handleFullscreen);
        }
    }
    addFullScreenStyle() {
        this.document.getElementsByTagName('html')[0].classList.add('devui-fullscreen');
    }
    removeFullScreenStyle() {
        this.document.getElementsByTagName('html')[0].classList.remove('devui-fullscreen');
    }
}
FullscreenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FullscreenComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
FullscreenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: FullscreenComponent, selector: "d-fullscreen", inputs: { mode: "mode", zIndex: "zIndex", target: "target" }, outputs: { fullscreenLaunch: "fullscreenLaunch" }, ngImport: i0, template: "<div class=\"fullscreen-container\">\n  <ng-content select=\"[fullscreen-launch]\"></ng-content>\n  <ng-content select=\"[fullscreen-target]\"></ng-content>\n</div>\n", styles: [":host ::ng-deep .fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:#fff;background-color:var(--devui-base-bg, #ffffff)}::ng-deep .devui-fullscreen{overflow:hidden}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FullscreenComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-fullscreen', preserveWhitespaces: false, template: "<div class=\"fullscreen-container\">\n  <ng-content select=\"[fullscreen-launch]\"></ng-content>\n  <ng-content select=\"[fullscreen-target]\"></ng-content>\n</div>\n", styles: [":host ::ng-deep .fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:#fff;background-color:var(--devui-base-bg, #ffffff)}::ng-deep .devui-fullscreen{overflow:hidden}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }]; }, propDecorators: { mode: [{
                type: Input
            }], zIndex: [{
                type: Input
            }], target: [{
                type: Input
            }], fullscreenLaunch: [{
                type: Output
            }] } });

class FullscreenModule {
}
FullscreenModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FullscreenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
FullscreenModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: FullscreenModule, declarations: [FullscreenComponent], imports: [CommonModule,
        ButtonModule], exports: [FullscreenComponent] });
FullscreenModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FullscreenModule, imports: [CommonModule,
        ButtonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FullscreenModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        ButtonModule
                    ],
                    exports: [
                        FullscreenComponent
                    ],
                    declarations: [
                        FullscreenComponent
                    ]
                }]
        }] });

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

export { DEFAULT_MODE, DEFAULT_ZINDEX, ESC_KEYCODE, FullscreenComponent, FullscreenModule };
//# sourceMappingURL=ng-devui-fullscreen.mjs.map
