import * as React from "react";
import { ComponentsMapProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ComponentsMapContext";

type Props = {};

export function withComponentsMapProvider(Component: React.ComponentType<any>) {
  return function WithComponentsMapProvider(props: Props) {
    const componentsHeightMapRef = React.useRef({});

    const getComponentHeightById = (id: string | number) => {
      return componentsHeightMapRef.current[id];
    };

    const setComponentHeightById = (id: string | number, height: number) => {
      componentsHeightMapRef.current = {
        ...componentsHeightMapRef.current,
        [id]: height,
      };
    };

    return (
      <ComponentsMapProvider
        {...{ setComponentHeightById, getComponentHeightById }}
      >
        <Component {...props} />
      </ComponentsMapProvider>
    );
  };
}