import { Host, h } from "@stencil/core";
import { computePosition, autoUpdate, offset, flip, shift } from "@floating-ui/dom";
import { useTranslation } from "../../utils/utils";
import { displayDateTime } from "../../utils/dayjs";
export class ReadsPopper {
    readers = [];
    referenceSelector;
    isOpen = false;
    el;
    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();
        const referenceEl = document.getElementById(this.referenceSelector);
        if ((!this.triggerEl || !path.includes(this.triggerEl)) &&
            (!this.popperEl || !path.includes(this.popperEl)) &&
            (!referenceEl || !path.includes(referenceEl))) {
            this.closePopper();
        }
    };
    handleCloseOthers = (e) => {
        if (e.detail !== this && this.isOpen) {
            this.closePopper();
        }
    };
    closePopper = () => {
        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;
            // Append to a higher level container so it's not clipped by message-item overflow
            const container = document.getElementById('chat-app') || document.body;
            container.appendChild(this.popperEl);
            this.cleanup = autoUpdate(referenceEl, this.popperEl, () => {
                computePosition(referenceEl, this.popperEl, {
                    placement: 'top-end', // Placing it above the read icons like typical chat apps
                    middleware: [offset(8), flip(), shift({ padding: 8 })],
                }).then(({ x, y }) => {
                    Object.assign(this.popperEl.style, {
                        left: `${x}px`,
                        top: `${y}px`,
                        zIndex: '9999',
                    });
                });
            });
        }
        else {
            this.closePopper();
        }
    }
    render() {
        const t = useTranslation();
        return (h(Host, { key: 'f9f5736a08cd11883d0812aa0989815308e20c93' }, h("div", { key: 'ff531c966b4faa67d976599e1223f63b764271e2', class: "relative w-full h-full" }, h("div", { key: '72831f0eb9223a724c5a6c6cbe9c24b47985d325', class: "reads-popper-trigger cursor-pointer", onClick: event => {
                event.stopPropagation();
                this.togglePopper();
            }, ref: el => (this.triggerEl = el), id: this.referenceSelector }, h("slot", { key: '0f44125bedd3fa81bfbc4a1c719de075467be1f5' })), h("div", { key: 'daea69afece5962ebcbce5b1a852f8d574629c8d', ref: el => (this.popperEl = el), class: `reads-popper-container ${this.isOpen ? 'flex' : 'hidden!'}` }, h("div", { key: '1b3ce3d5cb06f473fce1a09ba283232eaa363a1b', class: "reads-popper-header" }, t('message_seen_by')), h("div", { key: '86d5900f8d362a477b1403816022ade6d7800ae4', class: "reads-popper-list scroll-container" }, this.readers
            .sort((a, b) => new Date(a.read_at).getTime() - new Date(b.read_at).getTime())
            .map(reader => (h("div", { class: "reads-popper-item", key: reader.id }, reader.picture_url ? (h("z-avatar", { pictureUrl: reader.picture_url, size: "small" })) : (h("div", { class: "reads-popper-avatar-placeholder bg-time-badge text-surface flex items-center justify-center rounded-full" }, reader.name ? reader.name[0] : '?')), h("div", { class: "reads-popper-info" }, h("div", { class: "reads-popper-name truncate", title: reader.name }, reader.name), h("div", { class: "reads-popper-time text-theme-gray" }, displayDateTime(reader.read_at)))))))))));
    }
    static get is() { return "reads-popper"; }
    static get originalStyleUrls() {
        return {
            "$": ["reads-popper.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["reads-popper.css"]
        };
    }
    static get properties() {
        return {
            "readers": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ChatMessageReader[]",
                    "resolved": "ChatMessageReader[]",
                    "references": {
                        "ChatMessageReader": {
                            "location": "import",
                            "path": "../../store/type",
                            "id": "src/store/type.ts::ChatMessageReader",
                            "referenceLocation": "ChatMessageReader"
                        }
                    }
                },
                "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": {}
        };
    }
    static get elementRef() { return "el"; }
}
