import { jsx } from "react/jsx-runtime";
import styled from "@emotion/styled";
import { Panel, useReactFlow, useStore } from "../../xyflow/react.js";
import react from "react";
import { shallow } from "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.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(Panel)`
  pointer-events: none !important;
`;
function PanShortcutTeachingUIInternal({ message = 'Hold the Space bar and drag to pan the canvas' }) {
    const { hasSelection, isPanning } = useStore(userSelectionStateSelector, shallow);
    const reactFlowInstance = useReactFlow();
    const [showTeachingUI, setShowTeachingUI] = react.useState(false);
    const showTeachingUIRef = react.useRef(false);
    showTeachingUIRef.current = showTeachingUI;
    const isDraggingRef = react.useRef(false);
    const dragStartPosRef = react.useRef(null);
    const lastDragTimeRef = react.useRef(0);
    const dragAttemptsCountRef = react.useRef(0);
    const autoHideMessageTimeoutRef = react.useRef(void 0);
    react.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
    ]);
    react.useEffect(()=>{
        if (isPanning && showTeachingUIRef.current) {
            setShowTeachingUI(false);
            window.clearTimeout(autoHideMessageTimeoutRef.current);
        }
    }, [
        isPanning
    ]);
    react.useEffect(()=>()=>{
            window.clearTimeout(autoHideMessageTimeoutRef.current);
        }, []);
    return /*#__PURE__*/ jsx(StyledNonClickablePanel, {
        position: "bottom-center",
        children: /*#__PURE__*/ jsx(PanShortcutTeachingUIMessage, {
            className: showTeachingUI ? 'shown' : '',
            children: /*#__PURE__*/ jsx("span", {
                style: {
                    display: 'inline-flex',
                    color: 'var(--canvas-foreground-inverse)',
                    fontSize: '14px',
                    textAlign: 'center'
                },
                children: message
            })
        })
    });
}
const PanShortcutTeachingUI = /*#__PURE__*/ react.memo(PanShortcutTeachingUIInternal);
export { PanShortcutTeachingUI };
