import React from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { TagsColumnContent } from './TagsColumnContent';
import { TableColumn } from '../../model';
import { useSelector } from '../../useSelector';
import { WixPatternsContainer } from '@wix/bex-core';
import { TagsColumnConfig } from '../Tags/types';

export function buildTagsColumn<T>(
  container: WixPatternsContainer,
  columnConfig?: TagsColumnConfig<T>,
) {
  return {
    ...columnConfig,
    id: 'tags',
    title: container.translate('cairo.tags.collectionPage.tagsColumn.title'),
    render: (item: T) => <TagsColumnContent item={item} />,
    width: '200px',
    hiddenFromCustomColumnsSelection: false,
  } as TableColumn<T>;
}

export function useTagsColumn<T>() {
  const container = useWixPatternsContainer();
  useSelector(() => container.initTask.status);

  const buildTagsColumnWrapper = (columnConfig?: TagsColumnConfig<T>) => {
    return buildTagsColumn<T>(container, columnConfig);
  };

  return { buildTagsColumn: buildTagsColumnWrapper };
}
