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
  ) => {
    return (
      <FocusableGroupContext.Consumer>
        {(groupIdContext: string) => {
          // eslint-disable-next-line react/display-name
          const propsGroupId = groupId || null;
          const providedGroupId = propsGroupId || groupIdContext;

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

  return React.forwardRef(WithFocusableContext);
};