import React, {
  forwardRef,
  ReactElement,
  JSXElementConstructor,
  useState,
} from 'react';
import { FiltersMap, KeyedItem } from '@wix/bex-core';
import { TableSectionRow } from './TableSectionRow';
import { TableSectionsState } from './TableSectionsState';
import { useTableBaseRow } from '../Table/useTableBaseRow';

export const useTableSectionRow = <T, F extends FiltersMap>(
  state: TableSectionsState<T, F>,
) => {
  const RegularTrElement = useTableBaseRow(state.table);

  const [CustomSectionsTR] = useState<
    React.ForwardRefExoticComponent<{
      children: ReactElement<any, string | JSXElementConstructor<any>>[];
      rowData: KeyedItem<T>;
      className: string;
    }>
  >(
    forwardRef((props, ref) => (
      <TableSectionRow
        {...props}
        ref={ref as React.RefObject<HTMLTableRowElement>}
        state={state}
        RegularTrElement={RegularTrElement}
      />
    )),
  );

  return CustomSectionsTR;
};