// Libs
// -----------------------------------------------------------------------------
import { Button, TableColumnProps, Tag, Space } from 'antd';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';

// App
// -----------------------------------------------------------------------------
import { CorrelationRulesRecord } from 'types/default';
import { CorrelationRulesDashboardLocale } from './types';

export const makeCorrelationRulesColumns = (
  locale: CorrelationRulesDashboardLocale,
  actions: { onDelete: (id: number) => void; onEdit: () => void },
): Array<TableColumnProps<CorrelationRulesRecord>> => {
  return [
    {
      title: locale.tableMessages.sid,
      dataIndex: 'sid',
      key: 'sid',
      align: 'center',
      width: '5%',
      sorter: true,
    },
    {
      title: locale.tableMessages.rev,
      dataIndex: 'rev',
      key: 'rev',
      align: 'center',
      width: '5%',
      sorter: true,
    },
    {
      // disabled: true,
      title: locale.tableMessages.name,
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      width: '25%',
      sorter: true,
    },
    {
      title: locale.tableMessages.status,
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (_value, rule) =>
        rule.status ? (
          <Tag color="#87d068">Включено</Tag>
        ) : (
          <Tag color="#f50">Отключено</Tag>
        ),
      sorter: true,
    },
    {
      title: locale.tableMessages.group,
      dataIndex: 'group',
      key: 'group',
      align: 'center',
      render: (_value, rule) => rule?.group?.name,
      sorter: true,
    },
    {
      title: locale.tableMessages.created,
      dataIndex: 'created',
      key: 'created',
      align: 'center',
      sorter: true,
    },
    {
      title: locale.tableMessages.updated,
      dataIndex: 'updated',
      key: 'updated',
      align: 'center',
      sorter: true,
    },
    {
      title: locale.tableMessages.actions,
      dataIndex: 'actions',
      key: 'actions',
      align: 'center',
      width: '10%',
      render: (_value, rule) => (
        <Space>
          <Button
            type="link"
            icon={<EditOutlined />}
            title={locale.edit}
            onClick={() => {
              actions.onEdit();
            }}
          />
          <Button
            onClick={(e) => {
              e.stopPropagation();
              actions.onDelete(rule.id);
            }}
            style={{ padding: '4px 5px' }}
            type="link"
            title={locale.delete}
            icon={<DeleteOutlined />}
          />
        </Space>
      ),
    },
  ];
};
