import { SizePerPageRendererOptions } from 'react-bootstrap-table-next';

const columns = [
  {
    dataField: 'maNhom',
    text: 'Nhóm vật tư',
    sort: true,
  },
  {
    dataField: 'maVt',
    text: 'Mã vật tư',
    sort: true,
  },
  {
    dataField: 'dvt',
    text: 'Đơn vị tính',
    sort: true,
  },
  {
    dataField: 'maLo',
    text: 'Mã lô',
    sort: true,
  },
  {
    dataField: 'ngaySanXuat',
    text: 'Ngày sản xuất',
    sort: true,
  },
  {
    dataField: 'hanSuDung',
    text: 'Hạn sử dụng',
    sort: true,
  },
  {
    dataField: 'nguonGoc',
    text: 'Nguồn gốc',
    sort: true,
  },
  {
    dataField: 'ngayNhapKho',
    text: 'Ngày nhập kho',
    sort: true,
  },
  {
    dataField: 'thoiHanLuuKho',
    text: 'Thời hạn lưu kho',
    sort: true,
  },
  {
    dataField: 'tonKho',
    text: 'Tồn kho hiện tại',
    sort: true,
  },
];

const cellEdit = {
  mode: 'dbclick',
  blurToSave: true,
};

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="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</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,
  cellEdit,
  pagination,
  selectRow,
};

export default tableConfig;
