"use client";
import * as React from "react";
import { ownerDocument } from "../../../../utils/esm/owner.js";
import { useTimeout } from "../../../../utils/esm/useTimeout.js";
import { useContextMenuRootContext } from "../root/ContextMenuRootContext.js";
import { useMenuRootContext } from "../../menu/root/MenuRootContext.js";
import { useRenderElement } from "../../utils/useRenderElement.js";
import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
import { findRootOwnerId } from "../../menu/utils/findRootOwnerId.js";
import { getTarget, contains } from "../../floating-ui-react/utils/element.js";
import { stopEvent } from "../../floating-ui-react/utils/event.js";
import { cancelOpen, triggerPress } from "../../utils/reason-parts.js";
const LONG_PRESS_DELAY = 500;
const ContextMenuTrigger = /* @__PURE__ */ React.forwardRef(function ContextMenuTrigger2(componentProps, forwardedRef) {
  const {
    render,
    className,
    ...elementProps
  } = componentProps;
  const {
    setAnchor,
    actionsRef,
    internalBackdropRef,
    backdropRef,
    positionerRef,
    allowMouseUpTriggerRef,
    initialCursorPointRef,
    rootId
  } = useContextMenuRootContext(false);
  const {
    store
  } = useMenuRootContext(false);
  const open = store.useState("open");
  const triggerRef = React.useRef(null);
  const touchPositionRef = React.useRef(null);
  const longPressTimeout = useTimeout();
  const allowMouseUpTimeout = useTimeout();
  const allowMouseUpRef = React.useRef(false);
  function handleLongPress(x, y, event) {
    const isTouchEvent = event.type.startsWith("touch");
    initialCursorPointRef.current = {
      x,
      y
    };
    setAnchor({
      getBoundingClientRect() {
        return DOMRect.fromRect({
          width: isTouchEvent ? 10 : 0,
          height: isTouchEvent ? 10 : 0,
          x,
          y
        });
      }
    });
    allowMouseUpRef.current = false;
    actionsRef.current?.setOpen(true, createChangeEventDetails(triggerPress, event));
    allowMouseUpTimeout.start(LONG_PRESS_DELAY, () => {
      allowMouseUpRef.current = true;
    });
  }
  function handleContextMenu(event) {
    allowMouseUpTriggerRef.current = true;
    stopEvent(event);
    handleLongPress(event.clientX, event.clientY, event.nativeEvent);
    const doc = ownerDocument(triggerRef.current);
    doc.addEventListener("mouseup", (mouseEvent) => {
      allowMouseUpTriggerRef.current = false;
      if (!allowMouseUpRef.current) {
        return;
      }
      allowMouseUpTimeout.clear();
      allowMouseUpRef.current = false;
      const mouseUpTarget = getTarget(mouseEvent);
      if (contains(positionerRef.current, mouseUpTarget)) {
        return;
      }
      if (rootId && mouseUpTarget && findRootOwnerId(mouseUpTarget) === rootId) {
        return;
      }
      actionsRef.current?.setOpen(false, createChangeEventDetails(cancelOpen, mouseEvent));
    }, {
      once: true
    });
  }
  function handleTouchStart(event) {
    allowMouseUpTriggerRef.current = false;
    if (event.touches.length === 1) {
      event.stopPropagation();
      const touch = event.touches[0];
      touchPositionRef.current = {
        x: touch.clientX,
        y: touch.clientY
      };
      longPressTimeout.start(LONG_PRESS_DELAY, () => {
        if (touchPositionRef.current) {
          handleLongPress(touchPositionRef.current.x, touchPositionRef.current.y, event.nativeEvent);
        }
      });
    }
  }
  function handleTouchMove(event) {
    if (longPressTimeout.isStarted() && touchPositionRef.current && event.touches.length === 1) {
      const touch = event.touches[0];
      const moveThreshold = 10;
      const deltaX = Math.abs(touch.clientX - touchPositionRef.current.x);
      const deltaY = Math.abs(touch.clientY - touchPositionRef.current.y);
      if (deltaX > moveThreshold || deltaY > moveThreshold) {
        longPressTimeout.clear();
      }
    }
  }
  function handleTouchEnd() {
    longPressTimeout.clear();
    touchPositionRef.current = null;
  }
  React.useEffect(() => {
    function handleDocumentContextMenu(event) {
      const target = getTarget(event);
      const targetElement = target;
      if (contains(triggerRef.current, targetElement) || contains(internalBackdropRef.current, targetElement) || contains(backdropRef.current, targetElement)) {
        event.preventDefault();
      }
    }
    const doc = ownerDocument(triggerRef.current);
    doc.addEventListener("contextmenu", handleDocumentContextMenu);
    return () => {
      doc.removeEventListener("contextmenu", handleDocumentContextMenu);
    };
  }, [backdropRef, internalBackdropRef]);
  const state = React.useMemo(() => ({
    open
  }), [open]);
  const element = useRenderElement("div", componentProps, {
    state,
    ref: [triggerRef, forwardedRef],
    props: [{
      onContextMenu: handleContextMenu,
      onTouchStart: handleTouchStart,
      onTouchMove: handleTouchMove,
      onTouchEnd: handleTouchEnd,
      onTouchCancel: handleTouchEnd,
      style: {
        WebkitTouchCallout: "none"
      }
    }, elementProps],
    stateAttributesMapping: pressableTriggerOpenStateMapping
  });
  return element;
});
if (process.env.NODE_ENV !== "production") ContextMenuTrigger.displayName = "ContextMenuTrigger";
export {
  ContextMenuTrigger
};
//# sourceMappingURL=ContextMenuTrigger.js.map
