import React, { ReactNode } from "react";

export const CellFocusedStateContext = React.createContext<boolean>(false);

export const CellFocusedStateContextProvider = ({
  cellFocused,
  children,
}: {
  cellFocused: boolean;
  children: ReactNode;
}) => {
  return (
    <CellFocusedStateContext.Provider value={cellFocused}>
      {children}
    </CellFocusedStateContext.Provider>
  );
};

export function withCellFocusedStateContext(
  Component: React.ComponentType<any>
) {
  return function WithCellFocusedStateContextWrapper(props) {
    const cellFocusedState = React.useContext(CellFocusedStateContext);

    return <Component {...props} cellFocusedState={cellFocusedState} />;
  };
}