import { Table as AntTable, TableProps } from 'antd';
import { Box } from 'client/UIKit/grid';
import { toJS } from 'mobx';
import { observer } from 'mobx-react-lite';
import React from 'react';
import styled from 'styled-components';

const TableWrapper = styled(Box)`
  .ant-table-row-level-1 .ant-table-selection-column {
    visibility: hidden;
  }
`;

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

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