import React, { useCallback, useState } from "react";

import { BasicMeasurementsPortal as MeasurementsPortal } from "@applicaster/zapp-react-native-ui-components/Components/MeasurmentsPortal";
import { BottomSheetModalContent } from "./BottomSheetModalContent";

export type PluginConfiguration = {
  [key: string]: any;
};

type Props = {
  actionPlugins?: [QuickBrickPlugin];
  configuration?: PluginConfiguration;
};

export function ModalComponent(props: ModalBottomSheetContentProps & Props) {
  const [height, setHeight] = useState(0);

  const onLayout = useCallback(
    ({ nativeEvent }) => {
      if (height === 0) {
        setHeight(nativeEvent.layout.height);
      }
    },
    [height]
  );

  if (height === 0) {
    return (
      <MeasurementsPortal
        Component={BottomSheetModalContent}
        componentProps={props}
        onLayout={onLayout}
      />
    );
  }

  return <BottomSheetModalContent {...props} />;
}