import { Host, h } from "@stencil/core";
export class TagList {
    el;
    tags = [];
    chatId;
    referenceSelector;
    visibleCount = 0;
    containerEl;
    measureEl;
    resizeObserver;
    measureTimeout;
    componentDidLoad() {
        this.containerEl = this.el.querySelector(`#tag-list-native-${this.chatId}`);
        this.measureEl = this.el.querySelector(`#tag-list-measure-${this.chatId}`);
        this.debounceMeasure();
        this.resizeObserver = new ResizeObserver(() => this.debounceMeasure());
        if (this.containerEl)
            this.resizeObserver.observe(this.containerEl);
        window.addEventListener('resize', this.onWindowResize);
    }
    componentWillUpdate() {
        this.debounceMeasure();
    }
    disconnectedCallback() {
        if (this.resizeObserver)
            this.resizeObserver.disconnect();
        window.removeEventListener('resize', this.onWindowResize);
        if (this.measureTimeout)
            clearTimeout(this.measureTimeout);
    }
    debounceMeasure = () => {
        if (this.measureTimeout)
            clearTimeout(this.measureTimeout);
        this.measureTimeout = window.setTimeout(() => this.measure(), 0);
    };
    onWindowResize = () => {
        this.debounceMeasure();
    };
    measure() {
        if (!this.containerEl || !this.measureEl) {
            this.containerEl = this.el.querySelector(`#tag-list-native-${this.chatId}`);
            this.measureEl = this.el.querySelector(`#tag-list-measure-${this.chatId}`);
            if (!this.containerEl || !this.measureEl)
                return;
        }
        const available = this.containerEl.clientWidth;
        if (!available) {
            this.visibleCount = this.tags.length;
            return;
        }
        const children = Array.from(this.measureEl.children);
        const gap = 4;
        const popperReserve = 80;
        let used = 0;
        let fit = 0;
        for (let i = 0; i < children.length; i++) {
            const w = children[i].offsetWidth;
            const extraGap = i === 0 ? 0 : gap;
            if (used + extraGap + w + (i < children.length - 1 ? popperReserve : 0) <= available) {
                used += extraGap + w;
                fit++;
            }
            else {
                break;
            }
        }
        if (fit === children.length) {
            this.visibleCount = this.tags.length;
        }
        else {
            this.visibleCount = Math.max(0, fit);
        }
    }
    render() {
        const tags = this.tags || [];
        const visible = tags.slice(0, this.visibleCount);
        const hasMore = tags.length > this.visibleCount;
        return (h(Host, { key: '75f1d7da3ff5e49f442bb24559dd35c0a77fe0a0' }, h("div", { key: '688292bb5d0f9c016145cefc8ffc4ab8b2aaec84', id: `tag-list-native-${this.chatId}`, class: "tag-list", style: { display: 'flex', alignItems: 'center', overflow: 'hidden' } }, visible.map(tag => (h("tag-or-status-item", { item: tag, chatId: this.chatId, size: "sm" }))), hasMore && h("tag-popper", { key: '840964f2db3f278a328603cead69262e0805e2d7', tags: tags, referenceSelector: this.referenceSelector }), h("div", { key: 'ed94cf67d984f571e345016253238abb3214bf4e', id: `tag-list-measure-${this.chatId}`, style: {
                display: 'flex',
                gap: '4px',
                position: 'absolute',
                pointerEvents: 'none',
                height: 'auto',
                visibility: 'hidden',
                left: '-9999px',
                top: '0',
            } }, tags.map(tag => (h("tag-or-status-item", { item: tag, chatId: this.chatId, size: "sm" })))))));
    }
    static get is() { return "tag-list"; }
    static get originalStyleUrls() {
        return {
            "$": ["tag-list.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tag-list.css"]
        };
    }
    static get properties() {
        return {
            "tags": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "any[]",
                    "resolved": "any[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "chatId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "chat-id"
            },
            "referenceSelector": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "reference-selector"
            }
        };
    }
    static get states() {
        return {
            "visibleCount": {}
        };
    }
    static get elementRef() { return "el"; }
}
