import { Box, Tag as TagComponent } from '@wix/design-system';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';
const MAX_VISIBLE_TAGS = 3;
function _KanbanCardTags({ item, dataHook, maxVisibleTags = MAX_VISIBLE_TAGS, }) {
    const { tagsCollectionState } = useToolbarCollectionContext();
    const [isExpanded, setIsExpanded] = useState(false);
    if (!tagsCollectionState?.tagsManagementState) {
        return null;
    }
    const tags = tagsCollectionState._getTags?.(item) ?? item.tags;
    if (!tags?.privateTags?.tagIds?.length) {
        return null;
    }
    const tagItems = tags.privateTags.tagIds
        .map((tagId) => tagsCollectionState.tagsManagementState.items.find((tag) => tag.id === tagId))
        .filter(Boolean);
    if (tagItems.length === 0) {
        return null;
    }
    const visibleTags = isExpanded ? tagItems : tagItems.slice(0, maxVisibleTags);
    const hiddenCount = tagItems.length - maxVisibleTags;
    const hasMoreTags = hiddenCount > 0;
    return (React.createElement(Box, { dataHook: dataHook, direction: "horizontal", gap: "tiny", verticalAlign: "middle", flexWrap: "wrap", marginTop: "6px" },
        visibleTags.map((tag) => (React.createElement(TagComponent, { key: tag.id, id: tag.id, dataHook: `${dataHook}-${tag.id}`, size: "tiny", removable: false }, tag.name))),
        hasMoreTags && !isExpanded && (React.createElement(TagComponent, { id: `${dataHook}-toggle`, dataHook: `${dataHook}-toggle`, size: "tiny", removable: false, onClick: () => setIsExpanded(!isExpanded), skin: "lightOutlined" }, `+${hiddenCount}`))));
}
export const KanbanCardTags = observer(_KanbanCardTags);
//# sourceMappingURL=KanbanCardTags.js.map