"use strict";
var __webpack_require__ = {};
(()=>{
    __webpack_require__.n = (module)=>{
        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
        __webpack_require__.d(getter, {
            a: getter
        });
        return getter;
    };
})();
(()=>{
    __webpack_require__.d = (exports1, definition)=>{
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
(()=>{
    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
    __webpack_require__.r = (exports1)=>{
        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
    PanShortcutTeachingUI: ()=>PanShortcutTeachingUI
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const styled_namespaceObject = require("@emotion/styled");
var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
const external_react_namespaceObject = require("react");
var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
const shallow_namespaceObject = require("zustand/shallow");
const MIN_DRAG_DISTANCE = 5;
const DOUBLE_DRAG_DURATION_IN_MS = 2000;
const AUTO_HIDE_MESSAGE_DURATION_IN_MS = 3000;
const userSelectionStateSelector = (s)=>{
    const hasSelectedNodes = s.nodes.some((node)=>node.selected);
    const hasSelectedEdges = s.edges.some((edge)=>edge.selected);
    const hasSelection = hasSelectedNodes || hasSelectedEdges;
    return {
        hasSelection,
        isPanning: s.paneDragging
    };
};
const PanShortcutTeachingUIMessage = styled_default().div`
  background-color: var(--canvas-background-inverse);
  padding: 8px 8px;
  border-radius: 4px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);

  opacity: 0;
  transform: translateY(4px);
  transition:
    all 0.2s,
    background-color 0.1s;

  display: flex;
  align-items: center;
  gap: 8px;

  &.shown {
    opacity: 1;
    transform: translateY(0);
  }
`;
const StyledNonClickablePanel = styled_default()(react_cjs_namespaceObject.Panel)`
  pointer-events: none !important;
`;
function PanShortcutTeachingUIInternal({ message = 'Hold the Space bar and drag to pan the canvas' }) {
    const { hasSelection, isPanning } = (0, react_cjs_namespaceObject.useStore)(userSelectionStateSelector, shallow_namespaceObject.shallow);
    const reactFlowInstance = (0, react_cjs_namespaceObject.useReactFlow)();
    const [showTeachingUI, setShowTeachingUI] = external_react_default().useState(false);
    const showTeachingUIRef = external_react_default().useRef(false);
    showTeachingUIRef.current = showTeachingUI;
    const isDraggingRef = external_react_default().useRef(false);
    const dragStartPosRef = external_react_default().useRef(null);
    const lastDragTimeRef = external_react_default().useRef(0);
    const dragAttemptsCountRef = external_react_default().useRef(0);
    const autoHideMessageTimeoutRef = external_react_default().useRef(void 0);
    external_react_default().useEffect(()=>{
        const eventContainer = document.body;
        const handleMouseDown = (event)=>{
            const target = event.target;
            if (target.closest('.react-flow__node') || target.closest('.react-flow__edge')) return;
            isDraggingRef.current = true;
            dragStartPosRef.current = {
                x: event.clientX,
                y: event.clientY
            };
        };
        const handleMouseMove = (event)=>{
            if (!isDraggingRef.current || !dragStartPosRef.current) return;
            event.clientX - dragStartPosRef.current.x;
            event.clientY - dragStartPosRef.current.y;
        };
        const handleMouseUp = (event)=>{
            if (!isDraggingRef.current || !dragStartPosRef.current) {
                isDraggingRef.current = false;
                dragStartPosRef.current = null;
                return;
            }
            const deltaX = Math.abs(event.clientX - dragStartPosRef.current.x);
            const deltaY = Math.abs(event.clientY - dragStartPosRef.current.y);
            const distance = Math.hypot(deltaX, deltaY);
            isDraggingRef.current = false;
            dragStartPosRef.current = null;
            if (distance > MIN_DRAG_DISTANCE) {
                const now = Date.now();
                const timeSinceLastDrag = now - lastDragTimeRef.current;
                lastDragTimeRef.current = now;
                if (timeSinceLastDrag > DOUBLE_DRAG_DURATION_IN_MS) dragAttemptsCountRef.current = 1;
                else {
                    dragAttemptsCountRef.current += 1;
                    if (2 === dragAttemptsCountRef.current) {
                        setShowTeachingUI(true);
                        dragAttemptsCountRef.current = 0;
                        window.clearTimeout(autoHideMessageTimeoutRef.current);
                        autoHideMessageTimeoutRef.current = window.setTimeout(()=>{
                            setShowTeachingUI(false);
                        }, AUTO_HIDE_MESSAGE_DURATION_IN_MS);
                    }
                }
            }
        };
        eventContainer.addEventListener('mousedown', handleMouseDown);
        eventContainer.addEventListener('mousemove', handleMouseMove);
        eventContainer.addEventListener('mouseup', handleMouseUp);
        return ()=>{
            eventContainer.removeEventListener('mousedown', handleMouseDown);
            eventContainer.removeEventListener('mousemove', handleMouseMove);
            eventContainer.removeEventListener('mouseup', handleMouseUp);
        };
    }, [
        reactFlowInstance,
        hasSelection
    ]);
    external_react_default().useEffect(()=>{
        if (isPanning && showTeachingUIRef.current) {
            setShowTeachingUI(false);
            window.clearTimeout(autoHideMessageTimeoutRef.current);
        }
    }, [
        isPanning
    ]);
    external_react_default().useEffect(()=>()=>{
            window.clearTimeout(autoHideMessageTimeoutRef.current);
        }, []);
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledNonClickablePanel, {
        position: "bottom-center",
        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PanShortcutTeachingUIMessage, {
            className: showTeachingUI ? 'shown' : '',
            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                style: {
                    display: 'inline-flex',
                    color: 'var(--canvas-foreground-inverse)',
                    fontSize: '14px',
                    textAlign: 'center'
                },
                children: message
            })
        })
    });
}
const PanShortcutTeachingUI = /*#__PURE__*/ external_react_default().memo(PanShortcutTeachingUIInternal);
exports.PanShortcutTeachingUI = __webpack_exports__.PanShortcutTeachingUI;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "PanShortcutTeachingUI"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
