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

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

  const dataSource = toJS(fingap.risks);
  const selectedRowKeys = [...toJS(fingap.selectedKeys)];

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      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);
        },
        selectedRowKeys,
      }}
      pagination={false}
      size="small"
      scroll={{
        x: true,
      }}
    />
  );
});

export default FinGAPTable;