import { h } from "@stencil/core";
import { ZIconButton } from "./z-icon-button";
import { configStore, deviceModeStore, selectedChatStore } from "../../store/store";
import { useTranslation } from "../../utils/utils";
export const AssociatedUsersSection = ({ associatedUsers, isOpenDrawer, tempDrawerUser, onJumpToChat, onViewProfile, onUnlinkUser, onSetIsOpenDrawer, renderUserInfo, }) => {
    const t = useTranslation();
    const theme = configStore.get('theme');
    const isMobile = deviceModeStore.get('mode') === 'mobile';
    const selectedChat = selectedChatStore.get('selectedChat');
    return (h("div", { class: "profile-info-user-wrapper pt-2 gap-y-1", "data-theme": theme }, h("div", { class: "col-span-3 profile-info-box-wrapper" }, h("span", { class: "text-surface" }, t('profile_tab.related_user'))), h("div", { class: `col-span-3 w-full` }, associatedUsers.map((userItem, index) => {
        const isSelected = userItem.id === selectedChat.user.id;
        const connectionName = userItem.connection ? userItem.connection.name : '';
        return (h("div", { key: index, class: `profile-info-associated-user-wrapper ${isSelected ? 'bg-pink-100 text-black' : 'bg-background text-surface'} border-divider` }, h("div", { class: "profile-info-box-wrapper w-full" }, h("img", { src: `https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/${userItem.channel === 'zignal' ? `${theme}-zignal` : userItem.channel}.png`, alt: "agent avatar", class: "size-5 rounded-full", loading: "lazy" }), h("span", { class: `profile-info-capitalize truncate w-1/2`, title: connectionName }, connectionName), h("z-avatar", { pictureUrl: userItem.picture_url, size: "small" }), h("span", { class: `profile-info-capitalize truncate w-1/2`, title: userItem.name || '' }, userItem.name), h("div", { class: "profile-info-associated-user-action-wrapper" }, !isSelected && (h(ZIconButton, { variant: "none", iconName: "MessageSquareText", addClassIcon: `size-4 ${isSelected ? 'text-primary' : 'text-surface'}`, noPaddingY: true, onClick: () => onJumpToChat(userItem) })), !isSelected && (h(ZIconButton, { variant: "none", iconName: "UserSearch", addClassIcon: `size-4 ${isSelected ? 'text-primary' : 'text-surface'}`, noPaddingY: true, onClick: () => onViewProfile(userItem) })), h(ZIconButton, { variant: "none", iconName: "Unlink", addClassIcon: `size-4 ${isSelected ? 'text-primary' : 'text-surface'}`, noPaddingY: true, onClick: () => onUnlinkUser(userItem) })))));
    })), h("div", { class: `profile-info-drawer-backdrop z-width-${isMobile ? '100' : '25'} ${isOpenDrawer ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`, onClick: () => onSetIsOpenDrawer(false) }), h("div", { class: `profile-info-drawer-wrapper z-width-${isMobile ? '100' : '25'} bg-background ${isOpenDrawer ? 'translate-y-0' : 'translate-y-full'}` }, h("div", { class: "profile-info-drawer-content scroll-container" }, h("div", { class: "profile-info-drawer-content-close" }, h(ZIconButton, { variant: "text", iconName: "X", addClassIcon: "size-4 text-surface", onClick: () => onSetIsOpenDrawer(false) })), isOpenDrawer && tempDrawerUser && renderUserInfo(tempDrawerUser, true)))));
};
