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

// App
// -----------------------------------------------------------------------------
import { TypeAccount } from 'types/default';
import { AccountsDashboardLocale } from './i18n';
import styles from './AccountsDashboard.module.scss';

export const makeAccountsDashboardColumns = (
  locale: AccountsDashboardLocale,
  actions: { onDelete: (id: number) => void; onEdit: () => void },
  checkIsCurrent: (entity: TypeAccount) => boolean,
): Array<TableColumnProps<TypeAccount>> => {
  return [
    {
      title: locale.tableMessages.id,
      dataIndex: ['user', 'id'],
      key: 'id',
      align: 'center',
      width: '5%',
      sorter: true,
    },
    {
      title: locale.tableMessages.login,
      dataIndex: ['user', 'username'],
      key: 'login',
      align: 'center',
      width: '15%',
      sorter: true,
      render: (login, account) => {
        if (checkIsCurrent(account)) {
          return (
            <span
              className={styles['current-user-label']}
              title={locale.currentUser}
            >
              <UserOutlined className={styles['current-user-label-icon']} />
              {login}
            </span>
          );
        } else {
          return login;
        }
      },
    },
    {
      title: locale.tableMessages.fio,
      dataIndex: ['user', 'first_name'],
      key: 'fio',
      align: 'center',
      width: '30%',
      sorter: true,
    },
    {
      title: locale.tableMessages.email,
      dataIndex: ['user', 'email'],
      key: 'email',
      align: 'center',
      width: '30%',
      sorter: true,
    },
    {
      title: locale.tableMessages.status,
      dataIndex: ['user', 'is_active'],
      key: 'status',
      align: 'center',
      width: '10%',
      render: (_value, account) =>
        account.user.is_active ? (
          <Tag color="green">{locale.active}</Tag>
        ) : (
          <Tag color="red">{locale.blocked}</Tag>
        ),
      sorter: true,
    },
    {
      title: locale.tableMessages.actions,
      dataIndex: undefined,
      key: 'actions',
      align: 'center',
      width: '10%',
      render: (_value, account) => {
        const isCurrent = checkIsCurrent(account);

        return (
          <Space>
            <Button
              type="link"
              icon={<EditOutlined />}
              title={locale.edit}
              onClick={() => {
                actions.onEdit();
              }}
            />
            <Button
              onClick={(e) => {
                e.stopPropagation();
                actions.onDelete(account.user.id);
              }}
              type="link"
              title={isCurrent ? locale.cannotDeleteCurrentUser : locale.delete}
              disabled={isCurrent}
              icon={<DeleteOutlined />}
            />
          </Space>
        );
      },
    },
  ];
};
