import React, { useContext } from "react";

type CellMeasurements = { width: number; height: number };

type MeasurementContextValue = {
  componentsHeightMap: React.RefObject<CellMeasurements | {}>;
  addComponentMeasurement: (
    componentId: string,
    measurements: CellMeasurements
  ) => MeasurementContextValue["componentsHeightMap"];
};

const ReactContext = React.createContext<MeasurementContextValue>({
  componentsHeightMap: React.createRef(),
  addComponentMeasurement: () => ({ current: {} }),
});

export function useMeasurementContext() {
  return useContext(ReactContext);
}

const Provider = ({ children }: { children: React.ReactNode }) => {
  const componentsHeightMap = React.useRef<CellMeasurements | {}>({});

  const addComponentMeasurement = (
    componentId: string,
    measurements: CellMeasurements
  ) => {
    componentsHeightMap.current[componentId] = measurements;

    return componentsHeightMap;
  };

  const contextValue = React.useMemo(
    () => ({ componentsHeightMap, addComponentMeasurement }),
    [addComponentMeasurement]
  );

  return (
    <ReactContext.Provider value={contextValue}>
      {children}
    </ReactContext.Provider>
  );
};

function withProvider(Component) {
  return function withProvider(props) {
    return (
      <Provider>
        <Component {...props} />
      </Provider>
    );
  };
}

export const MeasurementContext = { withProvider, ReactContext };