import { Host, h, Fragment } from "@stencil/core";
import { getContrastColorHelper } from "../../utils/utils";
import { computePosition, autoUpdate, offset, flip, shift } from "@floating-ui/dom";
export class TagOrStatusItem {
    chatId;
    item;
    expandText;
    size = 'md';
    delete;
    isOpen = false;
    triggerEl;
    popperEl;
    referenceSelector;
    cleanup;
    componentWillLoad() {
        this.referenceSelector = `tag-or-status-item-${this.item.id}-${this.chatId}`;
    }
    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 { name, color } = this.item;
        return (h(Host, { key: '67230811d2eb6ea9b5d21902155e466d67f04375' }, h(Fragment, { key: 'a211d661ad792b0c8baecb5c7a71b9d7351d1c9f' }, h("div", { key: '195ac9e4f75011a821133b689cedfe6702c1fad4', id: this.referenceSelector, class: `tag-or-status-item ${this.size}`, style: { backgroundColor: color }, ref: el => (this.triggerEl = el), onClick: event => {
                event.stopPropagation();
                this.togglePopper();
            } }, h("span", { key: 'bb4ea7ea928799e7f5dbe1d5077c967ced81c296', title: name, class: `text-xs ${this.expandText ? '' : 'tag-or-status-item-truncate'} `, style: { color: getContrastColorHelper(color) } }, name)), h("div", { key: '6e49a8cdb39e4440d3330a96ada82f7bf1afab41', ref: el => (this.popperEl = el), class: `tag-or-status-item-tooltip ${this.isOpen ? '' : 'hidden!'}` }, name))));
    }
    static get is() { return "tag-or-status-item"; }
    static get originalStyleUrls() {
        return {
            "$": ["tag-or-status-item.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tag-or-status-item.css"]
        };
    }
    static get properties() {
        return {
            "chatId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "chat-id"
            },
            "item": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "TTagOrStatusItem",
                    "resolved": "{ id?: string; sequence?: number; name: string; color?: string; iconName?: string; subIconName?: string; label?: string; value?: string; }",
                    "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
            },
            "expandText": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "expand-text"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'sm' | 'md' | 'lg'",
                    "resolved": "\"lg\" | \"md\" | \"sm\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "'md'"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {}
        };
    }
    static get events() {
        return [{
                "method": "delete",
                "name": "delete",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
}
