//@ts-nocheck
import { Table as AntTable, TableProps } from 'antd';
import { useStores } from 'client/hooks/useStores';
import { Box } from 'client/UIKit/grid';
import mq from 'client/UIKit/mq';
import { toJS } from 'mobx';
import { observer } from 'mobx-react-lite';
import { FC, useEffect } from 'react';
import styled from 'styled-components';

const TableWrapper = styled(Box)`
  height: 100%;
  overflow-x: scroll;
  ${mq.laptop`
overflow-x: hidden;
`}
  margin-bottom: 5px;
`;

interface ITableProps {
  insType: string;
  selectKey: (key: string) => void;
  selectedKey: string;
  tableConfig: TableProps<any>;
}

export default observer(({ insType, selectKey, selectedKey, tableConfig }) => {
  const { calculationStore } = useStores();
  const { ELTStore } = calculationStore.stores;

  // update parent selectedKey from store (when reset)
  const storeSelectedKey = ELTStore[insType].selectedKey;
  useEffect(() => {
    selectKey(storeSelectedKey);
  }, [storeSelectedKey]);

  return (
    <TableWrapper my="5px">
      <AntTable
        {...tableConfig}
        rowSelection={Object.assign(tableConfig.rowSelection, {
          selectedRowKeys: selectedKey ? [selectedKey] : [],
          onSelect: record => {
            selectKey(record.key);
          },
        })}
        dataSource={toJS(ELTStore[insType].list)}
      ></AntTable>
    </TableWrapper>
  );
}) as FC<ITableProps>;
