import React from "react";
import { PanGestureHandler } from "react-native-gesture-handler";
import { View } from "react-native";
import { useBottomSheet } from "@applicaster/zapp-react-native-utils/bottomSheet";

/**
 * Turns its children into a drag zone for the enclosing DraggableBottomSheet:
 * dragging here moves/dismisses the sheet (used for the modal header bar).
 * Outside a sheet (no context) it renders children unchanged.
 */
export const BottomSheetDragArea = ({
  children,
}: {
  children: React.ReactElement;
}) => {
  const sheet = useBottomSheet();

  // Outside a sheet (no context) render children unchanged.
  if (!sheet) return children;

  return (
    <PanGestureHandler
      simultaneousHandlers={[sheet.masterDrawerRef]}
      shouldCancelWhenOutside={false}
      onGestureEvent={sheet.onDragGestureEvent}
      onHandlerStateChange={sheet.onDragStateChange}
    >
      {/* Old-API PanGestureHandler needs a host-component child; children may
          be a function component (e.g. ModalHeader), so wrap in a View. */}
      <View>{children}</View>
    </PanGestureHandler>
  );
};