import React, { ReactNode } from 'react';
import { Row, Hooks } from 'react-table';
import Icon from '../Icon';
import { StyledExpandableIcon } from './StyledTable';

export default <D extends Record<string, unknown>>(hooks: Hooks<D>): void => {
  hooks.visibleColumns.push(cols => [
    {
      id: 'expander',
      Header: (): ReactNode => null,
      Cell: function Cell({
        row,
        customRowExpandable,
      }: {
        customRowExpandable: (rowData: D) => boolean;
        row: Row<D>;
      }): ReactNode {
        return customRowExpandable(row.original) ? (
          <StyledExpandableIcon {...row.getToggleRowExpandedProps()}>
            <Icon intent="text" icon={row.isExpanded ? 'remove' : 'add'} />
          </StyledExpandableIcon>
        ) : null;
      },
    },
    ...cols,
  ]);
};