import { Table as AntTable } from 'antd';
import { useStores } from 'client/hooks/useStores';
import { toJS } from 'mobx';
import { observer } from 'mobx-react-lite';
import config from './config';

export default observer(() => {
  const { calculationStore } = useStores();
  const { $finGAP } = calculationStore.stores;

  const dataSource = toJS($finGAP.risks);
  const selectedRowKeys = Array.from(toJS($finGAP.selectedKeys));
  
  return (
    <AntTable
      {...config}
      dataSource={dataSource}
      rowSelection={{
        ...config.rowSelection,
        onChange: (_, selectedRows) => {
          const selectedKeys = selectedRows.reduce((acc, row) => {
            acc.push(row.key);
            if (row.keys) return acc.concat(row.keys);
            return acc;
          }, []);

          $finGAP.setSelectedKeys(selectedKeys);
        },
        selectedRowKeys,
      }}
    />
  );
});
