import React, { useCallback, useState } from "react";
import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";

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

actionExecutor.registerAction("showTextInput", showTextInputAction);

export { SortableList, type SortableListProps } from "./SortableList";

export {
  TextInputContent,
  type TextInputContentProps,
} from "./TextInputContent";

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 }) => {
    setHeight((value) => (value === 0 ? nativeEvent.layout.height : value));
  }, []);

  if (height === 0) {
    return (
      <MeasurementsPortal
        Component={BottomSheetModalContent}
        componentProps={{
          ...props,
          measurementPhase: true,
        }}
        onLayout={onLayout}
      />
    );
  }

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