import { KhovtTransPhieuXuatDetailWithRelations, KhovtTransPhieuXuatWithRelations } from 'main/apis/drc/models';
import { Page } from 'main/constants';
import { SizePerPageRendererOptions } from 'react-bootstrap-table-next';
import { Link } from 'react-router-dom';

const columns = [
  {
    dataField: 'id',
    text: 'ID',
    sort: true,
  },
  {
    dataField: 'soPhieu',
    text: 'Số phiếu xuất',
    sort: true,
  },
  {
    dataField: 'details',
    text: 'Mã vật tư',
    formatter: (cell: KhovtTransPhieuXuatDetailWithRelations[], _: KhovtTransPhieuXuatWithRelations) => {
      if (!cell) {
        return null;
      }
      return (
        <div>
          {cell.map((detail) => (
            <div>{detail.tenVt}</div>
          ))}
        </div>
      );
    },
  },
  {
    dataField: 'khoXuat',
    text: 'Kho xuất',
    sort: true,
  },
  {
    dataField: 'khoNhap',
    text: 'Kho nhập',
    sort: true,
  },
  {
    dataField: 'nguoiTaoPhieu',
    text: 'Người tạo phiếu',
    sort: true,
  },
  {
    dataField: 'ngayXuat',
    text: 'Ngày xuất kho',
    sort: true,
  },
  {
    dataField: 'status',
    text: 'Trạng thái',
    sort: true,
  },
  {
    dataField: 'action',
    isDummyField: true,
    text: 'Thao tác',
    csvExport: false,
    formatter: (_: any, row: KhovtTransPhieuXuatWithRelations) => {
      return <Link to={Page.SUPPLIES_STORE_EXPORT_DETAIL.PATH.replace(':id', String(row.id))}>&lt;Xem&gt;</Link>;
    },
  },
];

const exportCSV = {
  fileName: `Danh-sách-phiếu-xuất.csv`,
  onlyExportSelection: true,
  exportAll: true,
  charset: 'utf-8',
};

const pagination = {
  page: 1,
  alwaysShowAllBtns: true,
  showTotal: true,
  withFirstAndLast: false,
  sizePerPageRenderer: ({ onSizePerPageChange }: SizePerPageRendererOptions) => (
    <div className="dataTables_length" id="datatable-basic_length">
      <label>
        Hiển thị&nbsp;
        {
          <select
            name="datatable-basic_length"
            aria-controls="datatable-basic"
            className="form-control form-control-sm"
            onChange={(e) => onSizePerPageChange(Number(e.target.value))}>
            <option value="2">2</option>
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="16">16</option>
          </select>
        }
        &nbsp;mục.
      </label>
    </div>
  ),
  paginationTotalRenderer: (from: number, to: number, size: number) => (
    <span className="react-bootstrap-table-pagination-total">
      &nbsp;Hiển thị hàng {from} đến {to} trên {size}
    </span>
  ),
};

const selectRow = {
  mode: 'checkbox',
  clickToSelect: true,
  clickToEdit: true,
  style: { backgroundColor: '#c8e6c9' },
};

const tableConfig = {
  columns,
  exportCSV,
  pagination,
  selectRow,
};

export default tableConfig;
