import { Box, Text } from '@wix/design-system';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import React from 'react';
import { Tag } from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
import { observer } from 'mobx-react-lite';
import { Tags } from '@wix/bex-core';

function _TagsColumnContent<T>({ item }: { item: T }) {
  const { tagsCollectionState } = useToolbarCollectionContext();

  if (!tagsCollectionState?.tagsManagementState) {
    return null;
  }

  const tags: Tags = (item as any).tags ?? tagsCollectionState._getTags?.(item);

  const tagNamesString = tags?.privateTags?.tagIds
    ?.map(
      (tagId: string) =>
        tagsCollectionState.tagsManagementState.items.find(
          (tag: Tag) => tag.id === tagId,
        )?.name,
    )
    .filter(Boolean)
    .join(', ');

  return (
    <Box minWidth={0}>
      <Text size="small" ellipsis>
        {tagNamesString}
      </Text>
    </Box>
  );
}

export const TagsColumnContent = observer(_TagsColumnContent);
