import Table from 'Elements/Table';
import { observer } from 'mobx-react-lite';
import { useStore } from 'stores/hooks';
import { columns } from './config';

const FinGAPTable = observer(() => {
  const { $tables } = useStore();
  const { finGAP } = $tables;

  return (
    <Table
      columns={columns}
      dataSource={finGAP.risks}
      rowSelection={{
        type: 'checkbox',
        onChange: (_, selectedRows) => {
          const selectedKeys = selectedRows.reduce((acc, row) => {
            acc.push(row.key);
            if (row.keys) return [...acc, ...row.keys];

            return acc;
          }, []);

          finGAP.setSelectedKeys(selectedKeys);
        },
      }}
      pagination={false}
      size="small"
      scroll={{
        x: true,
      }}
    />
  );
});

export default FinGAPTable;