import React, { forwardRef, useState } from 'react';
import { TableState } from '../../state';
import { FiltersMap } from '@wix/bex-core';
import { TableBaseRow } from './TableBaseRow';

export const useTableBaseRow = <T, F extends FiltersMap>(
  state: TableState<T, F>,
) => {
  const [CustomLoadingTR] = useState<
    React.ForwardRefExoticComponent<{
      children: React.ReactElement<
        any,
        string | React.JSXElementConstructor<any>
      >[];
      rowData: { id: string };
      className: string;
    }>
  >(
    forwardRef((props, ref) => {
      return (
        <TableBaseRow
          {...props}
          state={state.loadingRowState}
          ref={ref as React.RefObject<null>}
        />
      );
    }),
  );

  return CustomLoadingTR;
};