import { useCallback } from 'react';

import { useTableCellContext } from '../contexts/TableCellContext';
import { useTableFastActiveItemContext } from '../contexts/TableFastActiveItemContex';

/** Returns ref that should be used to register cell interactive element */
export function useTableInteractiveElement() {
  const { rowNumber, columnNumber } = useTableCellContext();
  const { registerCellElement } = useTableFastActiveItemContext();

  const elementRef = useCallback(
    (ref: HTMLElement | null) => {
      registerCellElement(rowNumber, columnNumber, ref);
    },
    [columnNumber, registerCellElement, rowNumber],
  );

  return {
    elementRef,
  };
}