import * as React from "react";
import { FocusableGroupContext } from "./FocusableGroupContext";

export const withFocusableContext = (Component) => {
  // eslint-disable-next-line react/display-name
  const WithFocusableContext = (
    { groupId, ...props }: Record<string, any>,
    ref
  ) => {
    const groupIdContext = React.useContext(FocusableGroupContext);
    const propsGroupId = groupId || null;
    const providedGroupId = propsGroupId || groupIdContext;

    return <Component {...props} groupId={providedGroupId} ref={ref} />;
  };

  return React.forwardRef(WithFocusableContext);
};