import { Host, h } from "@stencil/core";
import { cls, evaluateOverlayIndex, getOverlayContainer } from "../../utils/helpers";
import { Query, Theme } from "../../services/theme";
export class XModal {
    constructor() {
        this.loading = false;
        this.interval = undefined;
        this.size = 'normal';
        this.maxWidth = undefined;
        this.closable = true;
        this.visible = false;
    }
    /**
     * Observe the visible changes
     */
    watchVisible(newValue) {
        newValue && evaluateOverlayIndex(this.el);
        (newValue ? this.onOpen : this.onClose).emit(this.el);
    }
    /**
     * Open the modal window
     */
    async open() {
        this.visible = true;
        if (this.interval && this.interval > 0) {
            this.timer = setTimeout(() => {
                this.close();
            }, this.interval * 1000);
        }
        setTimeout(() => this.calculateBoundaries(), 300);
    }
    /**
     * Close the modal window
     */
    async close() {
        if (this.timer) {
            clearTimeout(this.timer);
        }
        this.visible = false;
        Theme.validateModals();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        const container = getOverlayContainer();
        const ref = this.el.getAttribute('ref');
        if (ref && Query(ref, container)) {
            Query(ref, container).remove();
        }
        container.appendChild(this.el);
        window.addEventListener('resize', () => this.calculateBoundaries());
    }
    /**
     * Verify if the modal content overflow the viewport and set max height
     */
    calculateBoundaries() {
        const content = this.getModalContentElement();
        const dock = this.getDockElement();
        if (!content) {
            return;
        }
        const containerStyles = window.getComputedStyle(this.container);
        const contentStyles = window.getComputedStyle(content);
        const containerOffset = parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom);
        const contentOffset = parseFloat(contentStyles.marginTop) + parseFloat(contentStyles.marginBottom);
        const dockHeight = dock ? dock.offsetHeight : 0;
        const maxHeight = window.innerHeight - (dockHeight + containerOffset + contentOffset);
        content.style.overflowY = content.scrollHeight > maxHeight ? 'auto' : 'initial';
        content.style.maxHeight = content.scrollHeight > maxHeight ? `${maxHeight}px` : 'initial';
    }
    /**
     * Search the content element
     */
    getModalContentElement() {
        return this.el.querySelector('x-card, .modal-body');
    }
    /**
     * Search the Dock element
     */
    getDockElement() {
        return this.el.querySelector('x-dock');
    }
    /**
     * On click modal container handler
     *
     * @param e
     * @returns
     */
    onClickContainer(e) {
        if (this.loading || !this.closable) {
            return;
        }
        if ((e.target.classList.contains('modal') || e.target.classList.contains('modal-container'))) {
            this.close();
        }
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: '37b7fb65d9ff7772cbcabda404f6007bcc469e7a', role: "modal", class: cls('modal', { 'modal-show': this.visible, 'modal-closable': this.closable, 'modal-loading': this.loading }), onClick: this.onClickContainer.bind(this) }, h("div", { key: '73e1effeab84c918539d289a9309b1e04697e9de', ref: el => this.container = el, class: "modal-container" }, this.loading && h("div", { key: 'a9f4c0ca8155564e9561edf53881d46022cf225a' }, h("div", { key: 'fcb9cb86a84d0066de506f57bc4aafbc437a88e1', class: "modal-loading" }, h("span", { key: '869f49274d7ff5659cc088e76a6abcdcefed1f73' }))), h("div", { key: 'f35880f7419ba9f228d42d3ae44948d2cc5bad78', class: cls('modal-slot', `modal-${this.size}`), style: { maxWidth: this.maxWidth } }, h("slot", { key: 'c447830a313283ad1f1fc9ab03f9ece2d3c3214f' }))), this.interval > 0 && this.visible && h("span", { key: '525f4cb294528b2c11d57615477d5986d0f8e90a', class: "modal-interval-indicator" }, h("span", { key: '49c56648b5b27d7a0649a585dbb84b3da46ed3f3', style: { animationDuration: this.interval + 's' } })));
    }
    ;
    static get is() { return "x-modal"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element show loading style"
                },
                "attribute": "loading",
                "reflect": false,
                "defaultValue": "false"
            },
            "interval": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element interval time in seconds to auto-close"
                },
                "attribute": "interval",
                "reflect": false
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ModalSizeType",
                    "resolved": "\"auto\" | \"big\" | \"full\" | \"large\" | \"medium\" | \"normal\" | \"regular\" | \"small\"",
                    "references": {
                        "ModalSizeType": {
                            "location": "local",
                            "path": "/opt/atlassian/pipelines/agent/build/src/components/x-modal/components.tsx",
                            "id": "src/components/x-modal/components.tsx::ModalSizeType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element size name"
                },
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'normal'"
            },
            "maxWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element max width"
                },
                "attribute": "max-width",
                "reflect": false
            },
            "closable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element closable on click outside"
                },
                "attribute": "closable",
                "reflect": false,
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "visible": {}
        };
    }
    static get events() {
        return [{
                "method": "onOpen",
                "name": "open",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On open modal emitter event"
                },
                "complexType": {
                    "original": "HostElement",
                    "resolved": "HostElement",
                    "references": {
                        "HostElement": {
                            "location": "import",
                            "path": "@stencil/core/internal",
                            "id": "node_modules::HostElement"
                        }
                    }
                }
            }, {
                "method": "onClose",
                "name": "close",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On close modal emitter event"
                },
                "complexType": {
                    "original": "HostElement",
                    "resolved": "HostElement",
                    "references": {
                        "HostElement": {
                            "location": "import",
                            "path": "@stencil/core/internal",
                            "id": "node_modules::HostElement"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "open": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Open the modal window",
                    "tags": []
                }
            },
            "close": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Close the modal window",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "visible",
                "methodName": "watchVisible"
            }];
    }
}
