import * as React from "react";

type HeaderOffsetContextType = () => {
  headersAbove?: number;
  headerOffset?: number;
};

type ProviderProps = {
  children: React.ReactChild;
  getHeaderOffset: () => {
    headersAbove?: number;
    headerOffset?: number;
  };
};

const initialHeaderOffsetContext: HeaderOffsetContextType = () => ({
  headerOffset: 0,
  headersAbove: null,
});

export const HeaderOffsetContext = React.createContext<HeaderOffsetContextType>(
  initialHeaderOffsetContext
);

export function withConsumer(Component) {
  return function WithConsumer(props) {
    const getHeaderOffset = React.useContext(HeaderOffsetContext);

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

export function Provider({ children, getHeaderOffset }: ProviderProps) {
  return (
    <HeaderOffsetContext.Provider value={getHeaderOffset}>
      {children}
    </HeaderOffsetContext.Provider>
  );
}