import { Fragment, Host, h } from "@stencil/core";
import { ChatItem } from "../internal-component/chat-item";
import { chatsStore, filterChatsStore } from "../../store/store";
import { getSocket, initSocket } from "../../utils/socket";
import { Icon } from "../internal-component/icon";
import { useTranslation } from "../../utils/utils";
import { handleChatSocket } from "../../store/chat";
export class ChannelBox {
    nextKey;
    isLoading = false;
    async componentWillLoad() {
        const socket = initSocket();
        socket.on('chat', this.onChatEvent);
    }
    disconnectedCallback() {
        const socket = getSocket();
        socket.off('chat', this.onChatEvent);
    }
    onSyncMessageComplete(event) {
        const sessionId = event.detail;
        this.onChatEvent({ sessionId });
    }
    onChatEvent = async (event) => {
        try {
            await handleChatSocket(event);
        }
        catch (error) {
            console.error('Error handling chat socket event:', error);
        }
    };
    render() {
        const t = useTranslation();
        const chats = chatsStore.get('chats');
        const filterChat = filterChatsStore.get('filterChat');
        return (h(Host, { key: '9831b9aa90957de33e776d31b081c6ff20b04791' }, h("div", { key: 'cda2a9591dd1eb5a0f97a18571f3a4eae7646559', class: "channel-box" }, filterChat && chats.length === 0 ? (h("div", { class: "channel-box-no-user text-theme-gray" }, h("div", { class: "mx-auto" }, h(Icon, { name: "UsersRound", addClass: "size-18" })), t('chat_tab.no_user_found'))) : (h(Fragment, null, chats.map(item => (h("div", { key: item.id }, h(ChatItem, { item: item })))))))));
    }
    static get is() { return "channel-box"; }
    static get originalStyleUrls() {
        return {
            "$": ["channel-box.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["channel-box.css"]
        };
    }
    static get states() {
        return {
            "nextKey": {},
            "isLoading": {}
        };
    }
    static get listeners() {
        return [{
                "name": "syncMessageComplete",
                "method": "onSyncMessageComplete",
                "target": "window",
                "capture": false,
                "passive": false
            }, {
                "name": "syncTagComplete",
                "method": "onSyncMessageComplete",
                "target": "window",
                "capture": false,
                "passive": false
            }];
    }
}
