import { Host, h } from "@stencil/core";
import { ZButton } from "../internal-component/z-button";
import { ZTagOrStatusItem } from "../internal-component/z-tag-or-status-item";
import { computePosition, autoUpdate, offset, flip, shift } from "@floating-ui/dom";
import { useTranslation } from "../../utils/utils";
export class TagPopper {
    tags = [];
    referenceSelector;
    isOpen = false;
    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();
        }
    };
    async togglePopper() {
        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: 'bottom-start',
                    middleware: [offset(8), 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() {
        const t = useTranslation();
        return (h(Host, { key: '94f743e8b5e6d273796c7bd878afad8ab57fc2da' }, h("div", { key: 'a2d49a892879b7f1bf29ac0819103a6d8ad39c34', class: "relative" }, h(ZButton, { key: '6d121c16463c3e04fd7da0b1ec1d059057b8cf44', label: t('more'), variant: "outlined", size: "x-small", onClick: event => {
                event.stopPropagation();
                this.togglePopper();
            }, ref: el => (this.triggerEl = el), id: this.referenceSelector }), h("div", { key: '826cab3f05ded038a919b38385ea03f1d8a0e925', ref: el => (this.popperEl = el), class: `tag-popper scroll-container ${this.isOpen ? 'flex' : 'hidden!'}` }, this.tags.map(tag => (h(ZTagOrStatusItem, { item: tag, expandText: true })))))));
    }
    static get is() { return "tag-popper"; }
    static get originalStyleUrls() {
        return {
            "$": ["tag-popper.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tag-popper.css"]
        };
    }
    static get properties() {
        return {
            "tags": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "TTagOrStatusItem[]",
                    "resolved": "TTagOrStatusItem[]",
                    "references": {
                        "TTagOrStatusItem": {
                            "location": "import",
                            "path": "../../store/type",
                            "id": "src/store/type.ts::TTagOrStatusItem",
                            "referenceLocation": "TTagOrStatusItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "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"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {}
        };
    }
}
