import { Host, h } from "@stencil/core";
import { computePosition, autoUpdate, offset, flip, shift } from "@floating-ui/dom";
import { ZIconButton } from "../internal-component/z-icon-button";
export class MenuList {
    menuItems = [];
    position = 'bottom-end';
    referenceSelector;
    icon;
    iconName;
    buttonTitle;
    variant = 'text';
    noPaddingY = false;
    isOpen = false;
    menuItemClick;
    triggerEl;
    popperEl;
    cleanup;
    componentDidLoad() {
        document.addEventListener('click', this.handleClickOutside);
        window.addEventListener('close-all-poppers', this.handleCloseOthers);
    }
    disconnectedCallback() {
        document.removeEventListener('click', this.handleClickOutside);
        window.removeEventListener('close-all-poppers', this.handleCloseOthers);
        if (this.cleanup)
            this.cleanup();
        if (this.popperEl)
            this.popperEl.remove();
    }
    handleClickOutside = (e) => {
        const path = e.composedPath();
        if (!path.includes(this.triggerEl) && !path.includes(this.popperEl)) {
            this.isOpen = false;
            if (this.cleanup)
                this.cleanup();
            if (this.popperEl)
                this.popperEl.remove();
        }
    };
    handleCloseOthers = (e) => {
        if (e.detail !== this && this.isOpen) {
            this.isOpen = false;
            if (this.cleanup)
                this.cleanup();
            if (this.popperEl)
                this.popperEl.remove();
        }
    };
    handleItemClick(item) {
        this.menuItemClick.emit(item);
        this.isOpen = false;
    }
    async toggleMenu() {
        this.isOpen = !this.isOpen;
        if (this.isOpen) {
            window.dispatchEvent(new CustomEvent('close-all-poppers', { detail: this }));
            const referenceEl = document.getElementById(this.referenceSelector);
            if (!referenceEl || !this.popperEl)
                return;
            const container = document.getElementById('chat-app');
            container.appendChild(this.popperEl);
            this.cleanup = autoUpdate(referenceEl, this.popperEl, () => {
                computePosition(referenceEl, this.popperEl, {
                    placement: this.position,
                    middleware: [offset(4), flip(), shift()],
                }).then(({ x, y }) => {
                    Object.assign(this.popperEl.style, {
                        left: `${x}px`,
                        top: `${y}px`,
                        zIndex: '9999',
                    });
                });
            });
        }
        else {
            if (this.cleanup)
                this.cleanup();
            if (this.popperEl)
                this.popperEl.remove();
        }
    }
    render() {
        return (h(Host, { key: '27d8f377c17cece5761a8ec3d2151d0f24333b11' }, h("div", { key: '1c96d5e6330a86445a7bedfe0739bf8bec384e4e', class: "relative" }, h(ZIconButton, { key: '4f16cbd50a4df96bd2f19e62e80a935183c6b6b7', variant: this.variant, icon: this.icon, iconName: this.iconName, onClick: event => {
                event.stopPropagation();
                this.toggleMenu();
            }, noPadding: true, ref: el => (this.triggerEl = el), id: this.referenceSelector, title: this.buttonTitle, noPaddingY: this.noPaddingY }), h("div", { key: '69dc67da982efd2fa75aae498c101900841706ea', ref: el => (this.popperEl = el), class: `menu-list ${this.isOpen ? '' : 'hidden!'}` }, this.menuItems.map(({ label, value, onClick }) => (h("div", { key: value, class: "menu-list-item", onClick: () => {
                this.handleItemClick(value);
                if (onClick)
                    onClick();
            } }, label)))))));
    }
    static get is() { return "menu-list"; }
    static get originalStyleUrls() {
        return {
            "$": ["menu-list.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["menu-list.css"]
        };
    }
    static get properties() {
        return {
            "menuItems": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "MenuListItem[]",
                    "resolved": "MenuListItem[]",
                    "references": {
                        "MenuListItem": {
                            "location": "import",
                            "path": "../../store/type",
                            "id": "src/store/type.ts::MenuListItem",
                            "referenceLocation": "MenuListItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "position": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Placement",
                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
                    "references": {
                        "Placement": {
                            "location": "import",
                            "path": "@floating-ui/dom",
                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
                            "referenceLocation": "Placement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "position",
                "defaultValue": "'bottom-end'"
            },
            "referenceSelector": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "reference-selector"
            },
            "icon": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "iconName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon-name"
            },
            "buttonTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "button-title"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'text' | 'none'",
                    "resolved": "\"none\" | \"text\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'text'"
            },
            "noPaddingY": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-padding-y",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {}
        };
    }
    static get events() {
        return [{
                "method": "menuItemClick",
                "name": "menuItemClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
}
