import React from "react";
import { Table as AntdTable } from "antd";
import { cols } from "../data";

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

const TableSelect = (props) => {
  // rowSelection object indicates the need for row selection
  const rowSelectionData = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === "Mike",
      // Column configuration not to be checked
      name: record.name,
    }),
  };

  //   [Props]
  const { dataSource = data, columns = cols, selectionType, size, bordered, children, ...rest } = props;

  return (
    <AntdTable
      rowSelection={
        selectionType
          ? {
              type: selectionType,
              ...rowSelectionData,
            }
          : false
      }
      dataSource={dataSource}
      columns={columns}
      bordered={bordered}
      size={size}
      style={{ width: "80%" }}
      {...rest}
    >
      {children}
    </AntdTable>
  );
};

export default TableSelect;