import { Host, h } from "@stencil/core";
import { computePosition, autoUpdate, flip, shift } from "@floating-ui/dom";
import { filterChatsStore, chatsStore } from "../../store/store";
import { ZButton } from "../internal-component/z-button";
import { Icon } from "../internal-component/icon";
import { t } from "i18next";
import { haveConnectionFromZwiz, haveConnectionFromZwizEnterprise } from "../../store/chat";
export class MenuChatType {
    referenceSelector;
    isOpen = false;
    selectedItem;
    internalLoading = false;
    get MENU_CHAT_TYPES() {
        const menuChatType = [
            {
                iconName: 'Inbox',
                label: t('inbox'),
                value: 'inbox', //Pass spam = undefined to getChats
            }
        ];
        if (haveConnectionFromZwiz()) {
            menuChatType.push(...[
                {
                    iconName: 'UserRound',
                    label: t('chat_filter.admin'),
                    value: 'admin',
                },
                {
                    iconName: 'BotMessageSquare',
                    label: t('chat_filter.chat_bot'),
                    value: 'chatbot',
                }
            ]);
        }
        if (haveConnectionFromZwizEnterprise()) {
            menuChatType.push({
                iconName: 'Eye',
                label: t('following'),
                value: 'following',
            });
        }
        menuChatType.push({
            iconName: 'CircleMinus',
            label: t('spam'),
            value: 'spam', //Pass spam = true to getChats
        });
        return menuChatType;
    }
    componentWillLoad() {
        this.selectedItem = this.MENU_CHAT_TYPES[0];
    }
    menuItemClick;
    triggerEl;
    popperEl;
    cleanup;
    disposeStore;
    componentDidLoad() {
        document.addEventListener('click', this.handleClickOutside);
        window.addEventListener('close-all-poppers', this.handleCloseOthers);
        this.disposeStore = chatsStore.onChange('loading', loading => {
            if (!loading) {
                this.internalLoading = false;
            }
        });
    }
    disconnectedCallback() {
        document.removeEventListener('click', this.handleClickOutside);
        window.removeEventListener('close-all-poppers', this.handleCloseOthers);
        if (this.cleanup)
            this.cleanup();
        if (this.disposeStore)
            this.disposeStore();
        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.internalLoading = true;
        this.menuItemClick.emit(item.value);
        this.selectedItem = item;
        this.isOpen = false;
        filterChatsStore.set('filterChat', {
            ...filterChatsStore.get('filterChat'),
            spam: item.value === 'spam' ? true : false,
            context: item.value === 'admin' ? 'contactadmin' : item.value === 'chatbot' ? '' : undefined,
            following: item.value === 'following' ? true : undefined,
        });
    }
    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-panel');
            container.appendChild(this.popperEl);
            this.cleanup = autoUpdate(referenceEl, this.popperEl, () => {
                computePosition(referenceEl, this.popperEl, {
                    placement: 'bottom-start',
                    middleware: [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: '8509b908b096450f140a84afb873d2bad5ce7c01' }, h("div", { key: '418c3a73d26d3e14dc6ccd5c622f412dc1b8bd21', class: "relative" }, h(ZButton, { key: '10f3d0d7218bdb427b46ed4eec083c999632df93', size: "medium", variant: "text", disabled: chatsStore.get('loading') && this.internalLoading, startIcon: this.internalLoading && chatsStore.get('loading') ? (h(Icon, { name: "LoaderCircle", addClass: "text-surface size-5 animate-spin" })) : (h(Icon, { name: this.selectedItem.iconName, addClass: "text-surface size-5" })), endIcon: h(Icon, { name: 'Triangle', addClass: "menu-chat-type-icon text-surface size-2" }), label: h("div", { class: "menu-chat-type-label text-surface text-xl", title: this.selectedItem.label }, this.selectedItem.label), onClick: event => {
                event.stopPropagation();
                this.toggleMenu();
            }, ref: el => (this.triggerEl = el), id: this.referenceSelector }), h("div", { key: 'dcbb1409840d03307a1804bdca8956e0e6dc40ea', ref: el => (this.popperEl = el), class: `menu-chat-type-wrapper ${this.isOpen ? '' : 'hidden!'}` }, this.MENU_CHAT_TYPES.map(item => {
            const { iconName, label, value, onClick } = item;
            const isSelected = this.selectedItem.value === value;
            return (h("div", { key: value, class: `menu-chat-type-item ${isSelected ? 'bg-pink-100 text-black' : ''}`, onClick: () => {
                    if (isSelected)
                        return;
                    this.handleItemClick(item);
                    if (onClick)
                        onClick();
                } }, h(Icon, { name: iconName, addClass: "size-4" }), label));
        })))));
    }
    static get is() { return "menu-chat-type"; }
    static get originalStyleUrls() {
        return {
            "$": ["menu-chat-type.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["menu-chat-type.css"]
        };
    }
    static get properties() {
        return {
            "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": {},
            "selectedItem": {},
            "internalLoading": {}
        };
    }
    static get events() {
        return [{
                "method": "menuItemClick",
                "name": "menuItemClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
}
