import { h } from "@stencil/core";
import { lockScroll, unlockScroll, getNextZIndex } from "../../utils/popup-manager";
import { createFocusTrap } from "../../utils/a11y";
/**
 * Dialog 对话框组件
 * 在保留当前页面状态的情况下，告知用户并承载相关操作
 */
export class Dialog {
    el;
    /** 是否显示 */
    modelValue = false;
    /** 标题 */
    title = '';
    /** 宽度 */
    width = '50%';
    /** 是否全屏 */
    fullscreen = false;
    /** 是否显示遮罩 */
    modal = true;
    /** 是否点击遮罩关闭 */
    closeOnClickModal = true;
    /** 是否按 ESC 关闭 */
    closeOnPressEscape = true;
    /** 是否显示关闭按钮 */
    showClose = true;
    /** 关闭时销毁 */
    destroyOnClose = false;
    /** 打开事件 */
    hbOpen;
    /** 关闭事件 */
    hbClose;
    /** 已关闭动画结束事件 */
    hbClosed;
    zIndex = 0;
    panelRef;
    trap;
    handleVisibleChange(newVal) {
        if (newVal) {
            this.zIndex = getNextZIndex();
            if (this.modal)
                lockScroll();
            this.hbOpen.emit();
            document.addEventListener('keydown', this.handleKeyDown);
        }
        else {
            if (this.modal)
                unlockScroll();
            document.removeEventListener('keydown', this.handleKeyDown);
        }
    }
    disconnectedCallback() {
        if (this.modelValue && this.modal)
            unlockScroll();
        document.removeEventListener('keydown', this.handleKeyDown);
        this.trap?.disconnect();
    }
    componentDidRender() {
        if (!this.panelRef)
            return;
        if (this.modelValue) {
            if (!this.trap) {
                this.trap = createFocusTrap({ container: this.panelRef });
            }
            this.trap.connect();
        }
        else {
            this.trap?.disconnect();
        }
    }
    handleKeyDown = (e) => {
        if (this.closeOnPressEscape && e.key === 'Escape') {
            this.close();
        }
    };
    close = () => {
        this.modelValue = false;
        this.hbClose.emit();
        setTimeout(() => this.hbClosed.emit(), 300);
    };
    handleOverlayClick = () => {
        if (this.closeOnClickModal)
            this.close();
    };
    render() {
        if (this.destroyOnClose && !this.modelValue)
            return null;
        return (h("div", { class: { 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.modelValue } }, this.modal && (h("div", { class: "hb-dialog__overlay", style: { zIndex: String(this.zIndex) }, onClick: this.handleOverlayClick })), h("div", { ref: (el) => (this.panelRef = el), class: {
                'hb-dialog': true,
                'hb-dialog--fullscreen': this.fullscreen,
                'hb-dialog--visible': this.modelValue,
            }, style: {
                zIndex: String(this.zIndex + 1),
                width: this.fullscreen ? '100%' : this.width,
            }, role: "dialog", "aria-modal": "true" }, h("div", { class: "hb-dialog__header" }, h("span", { class: "hb-dialog__title" }, this.title), this.showClose && (h("button", { type: "button", class: "hb-dialog__close", "aria-label": "\u5173\u95ED", onClick: this.close }, "\u00D7"))), h("div", { class: "hb-dialog__body" }, h("slot", null)), h("div", { class: "hb-dialog__footer" }, h("slot", { name: "footer" })))));
    }
    static get is() { return "hb-dialog"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dialog.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dialog.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false,
                "defaultValue": "false"
            },
            "title": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u6807\u9898"
                },
                "getter": false,
                "setter": false,
                "attribute": "title",
                "reflect": false,
                "defaultValue": "''"
            },
            "width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5BBD\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "width",
                "reflect": false,
                "defaultValue": "'50%'"
            },
            "fullscreen": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u5168\u5C4F"
                },
                "getter": false,
                "setter": false,
                "attribute": "fullscreen",
                "reflect": false,
                "defaultValue": "false"
            },
            "modal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u906E\u7F69"
                },
                "getter": false,
                "setter": false,
                "attribute": "modal",
                "reflect": false,
                "defaultValue": "true"
            },
            "closeOnClickModal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u70B9\u51FB\u906E\u7F69\u5173\u95ED"
                },
                "getter": false,
                "setter": false,
                "attribute": "close-on-click-modal",
                "reflect": false,
                "defaultValue": "true"
            },
            "closeOnPressEscape": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u6309 ESC \u5173\u95ED"
                },
                "getter": false,
                "setter": false,
                "attribute": "close-on-press-escape",
                "reflect": false,
                "defaultValue": "true"
            },
            "showClose": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u5173\u95ED\u6309\u94AE"
                },
                "getter": false,
                "setter": false,
                "attribute": "show-close",
                "reflect": false,
                "defaultValue": "true"
            },
            "destroyOnClose": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5173\u95ED\u65F6\u9500\u6BC1"
                },
                "getter": false,
                "setter": false,
                "attribute": "destroy-on-close",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "hbOpen",
                "name": "hbOpen",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u6253\u5F00\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "hbClose",
                "name": "hbClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u5173\u95ED\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "hbClosed",
                "name": "hbClosed",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u5DF2\u5173\u95ED\u52A8\u753B\u7ED3\u675F\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleVisibleChange"
            }];
    }
}
//# sourceMappingURL=Dialog.js.map
