import { h } from "@stencil/core";
import { useTranslation } from "../../utils/utils";
import { ZIconButton } from "./z-icon-button";
import { ZTagOrStatusItem } from "./z-tag-or-status-item";
import { ZButton } from "./z-button";
import { handleGetUserTags } from "../../store/chat";
import { configStore, selectedChatStore } from "../../store/store";
export const TagSection = ({ user, readOnly = false, activeTabIndex, isEditTag, isAddTag, tagItems, onEditTag, onCloseTag, onSaveUserTags, onSetIsAddTag, onDeleteTag, onAddTag, onCreateUserTag, }) => {
    const t = useTranslation();
    const theme = configStore.get('theme');
    const selectedChat = selectedChatStore.get('selectedChat');
    return (h("div", { class: "profile-info-user-wrapper border-b-[0.5px] pt-2 gap-y-1 border-divider", "data-theme": theme }, h("div", { class: "col-span-3 profile-info-box-wrapper" }, h("span", { class: "text-surface whitespace-nowrap" }, t('tag')), !readOnly && activeTabIndex === 0 && (h("slot", null, isEditTag ? (h("div", { class: "profile-info-box-wrapper justify-end w-full" }, h(ZIconButton, { variant: "text", iconName: "X", addClassIcon: "size-4", onClick: onCloseTag }), h(ZIconButton, { variant: "text", iconName: "Save", addClassIcon: "size-4", onClick: onSaveUserTags }))) : (h("div", { class: "profile-info-box-wrapper justify-end w-full" }, h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: onEditTag })))))), h("div", { class: `profile-info-tag-wrapper scroll-container` }, isEditTag ? (h("div", { class: "col-span-3" }, h("div", { class: "profile-info-box-wrapper flex-wrap" }, tagItems.length > 0 &&
        tagItems
            .filter(({ isDelete }) => !isDelete)
            .sort((a, b) => a.item.sequence - b.item.sequence)
            .map(tag => h(ZTagOrStatusItem, { item: tag.item, onDelete: () => onDeleteTag(tag.item.id) }))), selectedChatStore.get('isSyncingTag') && (h("div", { class: "profile-info-status-wrapper" }, h("status-badge", { status: "loading", label: t('chat_tab.syncing_tag') }))), h("div", { class: "mt-2" }, isAddTag ? (h("autocomplete-select", { referenceSelector: "profile-tag", type: "tag", selectedIds: tagItems.filter(({ isDelete }) => !isDelete).map(({ item }) => item.id), fetchItems: handleGetUserTags, createItem: name => onCreateUserTag(name).then(res => res), onSelecting: item => onAddTag(item.detail) })) : (h(ZButton, { variant: "outlined", fullWidth: true, label: `+ ${t('profile_tab.add_tag')}`, onClick: () => onSetIsAddTag(true) }))))) : (h("div", { class: "col-span-3" }, h("div", { class: "profile-info-box-wrapper flex-wrap" }, user.tags && user.tags.length > 0 ? (user.tags
        .sort((a, b) => a.sequence - b.sequence)
        .map(tag => h("tag-or-status-item", { item: tag, expandText: true, chatId: `profile-status-${selectedChat.id}-${readOnly ? 'readonly' : ''}` }))) : (h("span", { class: "text-sm text-theme-gray" }, t('profile_tab.tag_empty')))), selectedChatStore.get('isSyncingTag') && (h("div", { class: "profile-info-status-bottom-wrapper" }, h("status-badge", { status: "loading", label: t('chat_tab.syncing_tag') }))))))));
};
