import React, { ReactElement } from 'react';
import { Row, HeaderProps, Hooks } from 'react-table';

import Checkbox from '../Checkbox';

const SelectionCheckbox = (
  props: Omit<React.ComponentProps<typeof Checkbox>, 'value' | 'text'>
): ReactElement => (
  <Checkbox {...props} style={{ display: 'block' }} value="" text="" />
);

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default <D extends Record<string, any>>(hooks: Hooks<D>): void => {
  hooks.visibleColumns.push(cols => [
    {
      id: 'selection',
      Header: function Header({
        getToggleAllRowsSelectedProps,
      }: HeaderProps<D>): ReactElement {
        return <SelectionCheckbox {...getToggleAllRowsSelectedProps()} />;
      },
      Cell: function Cell({ row }: { row: Row<D> }): ReactElement {
        return <SelectionCheckbox {...row.getToggleRowSelectedProps()} />;
      },
    },
    ...cols,
  ]);
};