import React from "react";
import { View, StyleSheet } from "react-native";
import { MeasurementPortalContext } from "./MeasurementsPortal";

type Props = {
  Component: React.ElementType;
  onLayout: (LayoutChangeEvent) => void;
  componentProps?: Record<any, any>;
  containerStyle?: Record<string, any>;
};

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    opacity: 0,
  },
});

const _MeasurementsPortal = (
  { Component, onLayout, componentProps, containerStyle }: Props,
  ref
) => (
  // hack for cell to determine if cell is in measurement mode
  <MeasurementPortalContext.Provider value={{}}>
    <View
      onLayout={onLayout}
      style={[styles.container, containerStyle]}
      ref={ref}
    >
      <Component {...componentProps} />
    </View>
  </MeasurementPortalContext.Provider>
);

export const MeasurementsPortal = React.forwardRef(_MeasurementsPortal);