import * as React from "react";

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

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

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

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

export function withConsumer(Component) {
  return function WithConsumer(props) {
    return (
      <HeaderOffsetContext.Consumer>
        {(context) => <Component getHeaderOffset={context} {...props} />}
      </HeaderOffsetContext.Consumer>
    );
  };
}

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