import { h } from "@stencil/core";
import { configStore, profilePanelStore, selectedChatStore, translateStore } from "../../store/store";
import { leaveRoom } from "../../utils/socket";
import { displayDateTime, displayTime, isToday } from "../../utils/dayjs";
import { Icon } from "./icon";
import { useTranslation } from "../../utils/utils";
import { getChatChannelPictureUrl, getChatName, getChatPicture } from "../../store/chat";
import { ZAvatarGroup } from "./z-avatar-group";
import { LAST_MESSAGE_TYPE_TRANSLATION_LIST } from "../../utils/constant";
import { getConnectionItem } from "../../utils/func";
import { getCurrentAdminId } from "../../store/typing";
export const ChatItem = ({ item }) => {
    const t = useTranslation();
    const { id, connection, /*channel,*/ tags, /*unread_count,*/ last_message, last_message_at, type, pin, mark_as_unread, is_unread } = item;
    // const platformColor = channel === 'line' ? 'text-green-500' : 'text-blue-500';
    const theme = configStore.get('theme');
    const selectedChat = selectedChatStore.get('selectedChat');
    const isSelected = (selectedChat ? selectedChat.id : '') === id;
    const isUnread = /*(unread_count > 0)*/ is_unread || mark_as_unread;
    const chatName = getChatName(item);
    const connectionItem = getConnectionItem(item);
    const isLocked = connectionItem?.is_locked || false;
    const _sortedTags = tags.sort((a, b) => a.sequence - b.sequence);
    const getLastMessage = () => {
        let _lastMessage = last_message || '';
        let _lastMessageBy = '';
        if (item.last_message_role?.toLowerCase() === 'admin') {
            const isYou = item.last_message_admin_id !== null && item.last_message_admin_id === getCurrentAdminId();
            _lastMessageBy = t(isYou ? 'you' : 'chat_filter.admin').concat(': ');
        }
        if (LAST_MESSAGE_TYPE_TRANSLATION_LIST.includes(_lastMessage.toLowerCase())) {
            const translationKey = _lastMessage.replace(/{|}/g, '').replace(/-/g, '_').toLowerCase();
            _lastMessage = t('last_message.'.concat(translationKey));
        }
        return _lastMessageBy.concat(_lastMessage);
    };
    const getLastMessageTime = () => {
        if (last_message_at) {
            if (isToday(last_message_at)) {
                return displayTime(last_message_at);
            }
            else {
                return displayDateTime(last_message_at);
            }
        }
    };
    const handleSelectChatClick = () => {
        const selectedChat = selectedChatStore.get('selectedChat');
        if (selectedChat && selectedChat.id !== item.id) {
            leaveRoom(selectedChat.id);
        }
        selectedChatStore.set('selectedChat', item);
        selectedChatStore.set('isSearchMessage', false);
        profilePanelStore.reset();
        translateStore.reset();
    };
    return (h("div", { class: `chat-item ${isSelected ? 'bg-selected' : (!isUnread ? 'bg-background' : 'bg-linear-to-r from-background from-[71.4%] to-selected')}`, "data-theme": theme, onClick: () => {
            if (isLocked)
                return;
            handleSelectChatClick();
        } }, pin && (h("div", { class: "chat-item-pin" }, h(Icon, { name: "Pin", addClass: "chat-item-pin-icon text-primary" }))), h("div", { class: "chat-item-content-container" }, h("div", { class: "chat-item-avatar-wrapper" }, h("z-avatar", { pictureUrl: getChatPicture(item) }), h("div", { class: "chat-item-avatar-badge-top-left" }, h("z-avatar", { pictureUrl: ['line', 'facebook', 'instagram', 'tiktok', 'whatsapp', 'zwiz'].includes(connectionItem?.type) ? (connectionItem?.picture_url || connection.picture_url) : null, size: 'x-small', displayName: connection.name })), h("div", { class: "chat-item-avatar-badge" }, h("div", { class: "flex flex-row items-center" }, type === 'group' && (h(ZAvatarGroup, { size: "x-small" })), h("img", { src: getChatChannelPictureUrl(item), alt: "agent avatar", class: `chat-item-content-main-image ${type === 'group' ? '-translate-x-1' : ''}`, loading: "lazy" })))), h("div", { class: "chat-item-content-wrapper" }, h("div", { class: "chat-item-content-secondary mt-1" }, h("div", { class: "overflow-hidden" }, h("div", { title: chatName, class: `${isUnread ? 'font-bold' : ''} chat-item-content-secondary-nickname` }, chatName), h("div", { title: getLastMessage(), class: `${isUnread ? 'font-bold' : ''} chat-item-content-secondary-message` }, getLastMessage())), h("div", { class: "flex flex-col items-center gap-1 ml-auto pt-0.5" }, h("div", { title: getLastMessageTime(), class: "chat-item-content-main-time" }, getLastMessageTime()), isUnread && (h("span", { class: `chat-item-content-unread ${ /*unread_count === 0*/isUnread ? 'chat-item-content-unread-mark' : 'chat-item-content-unread-count'}` })))), h("tag-list", { tags: _sortedTags, chatId: id, referenceSelector: `chat-tag-${id}` }))), isLocked && (h("div", { class: "chat-item-locked" }))));
};
