// Antd
import { Tag } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons';

// Types
import { Incident } from 'myApi';
import { ColumnsType } from 'antd/es/table';
import { TypeButton } from 'components/DashboardTable/components/SingleActionsCard/types';
import { EIncidentStatusLabel } from 'types/default';
import { TypeIncidentDashboardTableMessages } from './types';

// Components
import SingleActionsCard from 'components/DashboardTable/components/SingleActionsCard/SingleActionsCard';

export type TUseColumns = {
  title: string;
  dataIndex: string;
  key: string;
  render?: (text: string | number) => JSX.Element | Element;
  align?: string;
  disabled?: boolean;
  sortOrder?: string | boolean;
  sorter?: boolean;
};

export enum COLOR {
  SUCCESS = 'success',
  PROCESSING = 'processing',
  ERROR = 'error',
  DEFAULT = 'default',
  WARNING = 'warning',
}

const tagStyle = {
  borderRadius: '8px',
  padding: '0 5px',
};

type TypeStatus = { value: number; label: string; color: COLOR };

export const STATUS_TYPE = (locale: {
  [key in EIncidentStatusLabel]: string;
}): TypeStatus[] => [
  {
    value: 0,
    label: locale[EIncidentStatusLabel.Not_Assigned],
    color: COLOR.ERROR,
  },
  {
    value: 1,
    label: locale[EIncidentStatusLabel.Assigned],
    color: COLOR.SUCCESS,
  },
  {
    value: 2,
    label: locale[EIncidentStatusLabel.Delayed],
    color: COLOR.PROCESSING,
  },
  {
    value: 3,
    label: locale[EIncidentStatusLabel.Resolved],
    color: COLOR.DEFAULT,
  },
  {
    value: 4,
    label: locale[EIncidentStatusLabel.False_Alarm],
    color: COLOR.WARNING,
  },
];

export const makeIncidentsColumns = (
  translations: {
    columnMessages: TypeIncidentDashboardTableMessages;
  },
  handleActions: {
    onEditIncident: (id: string) => void;
    onResolveIncident: (id: string) => void;
  },
): ColumnsType<Incident> => {
  const { onEditIncident, onResolveIncident } = handleActions;

  const { columns } = translations.columnMessages;

  return [
    {
      title: columns.id,
      dataIndex: 'user_friendly_id',
      key: 'user_friendly_id',
      align: 'center',
      sorter: true,
    },
    {
      title: columns.importance.title,
      dataIndex: 'importance',
      key: 'importance',
      align: 'center',
      render: (text) => {
        if (text < 30) {
          return (
            <Tag style={tagStyle} color={COLOR.SUCCESS}>
              {`${columns.importance.low} ${text}/100`}
            </Tag>
          );
        } else if (text > 30 && text <= 60) {
          return (
            <Tag style={tagStyle} color={COLOR.WARNING}>
              {`${columns.importance.middle} ${text}/100`}
            </Tag>
          );
        } else {
          return (
            <Tag style={tagStyle} color={COLOR.ERROR}>
              {`${columns.importance.high} ${text}/100`}
            </Tag>
          );
        }
      },
      sorter: true,
    },
    {
      title: columns.title,
      dataIndex: 'title',
      key: 'title',
      align: 'center',
      sorter: true,
    },
    {
      title: columns.status.title,
      dataIndex: 'status',
      key: 'status',
      render: (text) => {
        const currentType = STATUS_TYPE(columns.status.type).find(
          (type) => type.value === text,
        );
        if (currentType) {
          return <Tag color={currentType.color}>{currentType.label}</Tag>;
        } else return <div />;
      },
      align: 'center',
      sorter: true,
    },
    {
      title: columns.events,
      dataIndex: 'event_count',
      key: 'event_count',
      align: 'center',
      sorter: true,
    },
    {
      title: columns.group,
      dataIndex: 'group',
      key: 'group',
      align: 'center',
      sorter: true,
    },
    {
      title: columns.info,
      dataIndex: 'comment',
      key: 'comment',
      align: 'center',
      sorter: true,
    },
    {
      title: columns.updated,
      dataIndex: 'updated',
      key: 'updated',
      align: 'center',
      sorter: true,
    },
    {
      title: columns.actions.title,
      dataIndex: 'actions',
      key: 'actions',
      align: 'center',
      responsive: ['md'],
      render: (_, { incident_id, status }) => {
        const customConfig: Array<TypeButton | TypeButton[]> = [
          {
            key: 'edit',
            type: 'customButton',
            translation: columns.actions.edit,
            action: () => onEditIncident(incident_id),
          },
        ];
        if (status !== 3)
          customConfig.push([
            {
              key: 'resolve',
              type: 'customButton',
              translation: columns.actions.resolveIncident,
              action: () => onResolveIncident(incident_id),
              icon: CheckCircleOutlined,
            },
          ]);
        return <SingleActionsCard buttonsConfig={customConfig} />;
      },
    },
  ];
};
