import { TCommonMessages, useCommonMessages } from '../i18n';
import { ColumnsType } from 'antd/es/table';
import { TypeGroupsData } from './types';
import SingleActionsCard from './components/SingleActionsCard/SingleActionsCard';

export const useGroupTableColumns = (handleActions: {
  onDelete: (id: number[]) => void;
  onEdit: (id: number) => void;
}): ColumnsType<TypeGroupsData> => {
  const {
    groupsMessages: {
      table: { name, description, groupMembers, actions },
    },
  }: TCommonMessages = useCommonMessages();

  const { onDelete, onEdit } = handleActions;

  return [
    {
      title: name,
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      sorter: true,
    },
    {
      title: description,
      dataIndex: 'description',
      key: 'description',
      align: 'center',
      sorter: true,
    },
    {
      title: groupMembers,
      dataIndex: 'group',
      key: 'group',
      align: 'center',
      sorter: true,
      render: (_, { devices }) => {
        return devices?.map((item) => (
          <span style={{ textAlign: 'left' }}>
            {item.name}
            {devices.length > 1 ? ',' : ''}
          </span>
        ));
      },
    },
    {
      title: actions,
      dataIndex: 'actions',
      key: 'actions',
      align: 'center',
      sorter: true,
      width: '10%',
      render: (_, { id: rowId }) => {
        return (
          <SingleActionsCard
            buttonsConfig={[
              {
                key: 'edit',
                type: 'customButton',
                translation: 'Editing',
                action: () => onEdit(rowId),
              },
              {
                key: 'delete',
                type: 'customButton',
                translation: 'Deleting',
                action: () => onDelete([rowId]),
              },
            ]}
          />
        );
      },
    },
  ];
};
