// Libs
// -----------------------------------------------------------------------------
import React, { Fragment } from 'react';
import { TableColumnProps, Space, Button, Popconfirm, Form, Input } from 'antd';
import {
  EditOutlined,
  DeleteOutlined,
  SaveOutlined,
  CloseOutlined,
} from '@ant-design/icons';

// App
// -----------------------------------------------------------------------------
import { TypeNameDescriptionModel } from 'types/default';
import { TextHighlighter } from 'components';
import { ForeignKeyEntitiesTableMessages } from './i18n';

export function makeForeignKeyEntitiesTableColumns({
  editedId,
  locale,
  actions,
  searchString,
}: {
  editedId: number | null;
  locale: ForeignKeyEntitiesTableMessages;
  actions: {
    onDelete: (entity: TypeNameDescriptionModel) => void;
    onEdit: (entity: TypeNameDescriptionModel) => void;
    onSave: (entity: TypeNameDescriptionModel) => void;
    onCancel: (entity: TypeNameDescriptionModel) => void;
  };
  searchString: string;
}): Array<TableColumnProps<TypeNameDescriptionModel>> {
  return [
    {
      title: locale.id,
      key: 'id',
      dataIndex: 'id',
      align: 'center',
      sorter: (a, b) => a.id - b.id,
      defaultSortOrder: 'ascend',
      width: '10%',
      render: (value) => {
        return (
          <Fragment>
            {value}
            <Form.Item name="id" hidden>
              <Input hidden />
            </Form.Item>
          </Fragment>
        );
      },
    },
    {
      title: locale.name,
      key: 'name',
      dataIndex: 'name',
      align: 'center',
      sorter: (a, b) => (a.name > b.name ? 1 : -1),
      width: '30%',
      render: (value: string, record) => {
        const isThisEntityEdited = record.id === editedId;

        return isThisEntityEdited ? (
          <Form.Item name="name" style={{ margin: 0 }}>
            <Input placeholder={locale.name} />
          </Form.Item>
        ) : (
          <TextHighlighter text={value} searchString={searchString} />
        );
      },
    },
    {
      title: locale.description,
      key: 'description',
      dataIndex: 'description',
      align: 'left',
      width: '40%',
      render: (value, record) => {
        const isThisEntityEdited = record.id === editedId;

        return isThisEntityEdited ? (
          <Form.Item name="description" style={{ margin: 0 }}>
            <Input.TextArea placeholder={locale.description} />
          </Form.Item>
        ) : (
          value
        );
      },
    },
    {
      title: undefined,
      key: 'actions',
      dataIndex: undefined,
      align: 'center',
      width: '20%',
      render: (_value: undefined, record) => {
        const isThisEntityEdited = record.id === editedId;
        const isAnyOtherEntityEdited = !isThisEntityEdited && editedId !== null;

        return isThisEntityEdited ? (
          <Space>
            <Button
              type="link"
              icon={<SaveOutlined />}
              title={locale.save}
              onClick={() => actions.onSave(record)}
              disabled={isAnyOtherEntityEdited}
            />

            <Button
              type="link"
              icon={<CloseOutlined />}
              title={locale.cancel}
              onClick={() => actions.onCancel(record)}
              disabled={isAnyOtherEntityEdited}
            />
          </Space>
        ) : (
          <Space>
            <Button
              type="link"
              icon={<EditOutlined />}
              title={locale.edit}
              onClick={() => actions.onEdit(record)}
              disabled={isAnyOtherEntityEdited}
            />

            <Popconfirm
              title={locale.deleteConfirmation}
              onConfirm={() => {
                actions.onDelete(record);
              }}
              disabled={isAnyOtherEntityEdited}
              okText={locale.delete}
              cancelText={locale.cancel}
            >
              <Button
                type="link"
                icon={<DeleteOutlined />}
                title={locale.delete}
                disabled={isAnyOtherEntityEdited}
              />
            </Popconfirm>
          </Space>
        );
      },
    },
  ];
}
