import * as React from "react";

type LayoutContext = {
  screenMarginTop: number | null;
  screenMarginBottom: number | null;
  screenHeight: number | null;
  screenWidth: number | null;
  componentAnchorPointY: number | null;
  componentAvailableWidth: number | null;
  setScreenLayout?: (properties: {}) => void;
  resetScreenLayout?: () => void;
  extraAnchorPointYOffset: number;
};

const initialScreenLayoutContext: LayoutContext = {
  screenMarginTop: null,
  screenMarginBottom: null,
  screenHeight: null,
  screenWidth: null,
  componentAnchorPointY: null,
  componentAvailableWidth: null,
  extraAnchorPointYOffset: 0,
};

export const ScreenLayoutContext = React.createContext<LayoutContext>(
  initialScreenLayoutContext
);

export function ScreenLayoutContextConsumer(Component) {
  return function WithConsumer(props) {
    return (
      <ScreenLayoutContext.Consumer>
        {(context) => <Component {...props} screenLayout={context} />}
      </ScreenLayoutContext.Consumer>
    );
  };
}