import { useEffect, useRef, useState } from 'react';
import Draggable from 'react-draggable';
import { useOrientation } from 'react-use';

const DraggableNode = ({ children, onClick, className }) => {
    const [position, setPosition] = useState({ x: 0, y: 0 });
    const nodeRef = useRef(null);
    const [shouldDrag, setShouldDrag] = useState(false);
    const touchTimer = useRef(null);
    const hasMoved = useRef(false); // 新增：记录是否真的发生了拖动
    const orientation = useOrientation();

    useEffect(() => {
        setPosition({ x: 0, y: 0 });
    }, [orientation])

    const handleStop = (e, data) => {
        // 吸附到最近点
        const el = nodeRef.current;
        if (!el) return;

        clearTimeout(touchTimer.current);

        // 情况1：长按成功了 + 真的移动了 → 是拖拽，什么都不做
        if (shouldDrag && hasMoved.current) {
            // 拖拽结束，交给 Draggable 的 onStop
        }
        // 情况2：没触发长按 或 长按了但没移动 → 就是点击！
        else if (!hasMoved.current) {
            onClick?.(); // 手动触发点击
        }
        setShouldDrag(false);
        hasMoved.current = false;
    };

    const handleTouchStart = (e) => {
        hasMoved.current = false; // 重置

        touchTimer.current = setTimeout(() => {
            setShouldDrag(true);
            console.log("handleTouchStart");
            if ("vibrate" in navigator) navigator.vibrate(30);
        }, 220);
    };

    // 手指移动 → 标记为“已移动”
    const handleTouchMove = () => {
        hasMoved.current = true;
    };

    // 手指抬起 → 关键判断逻辑
    const handleTouchEnd = (e) => {
        clearTimeout(touchTimer.current);

        // 情况1：长按成功了 + 真的移动了 → 是拖拽，什么都不做
        if (shouldDrag && hasMoved.current) {
            // 拖拽结束，交给 Draggable 的 onStop
        }
        // 情况2：没触发长按 或 长按了但没移动 → 就是点击！
        else if (!hasMoved.current) {
            onClick?.(); // 手动触发点击
        }

        // 重置状态
        setShouldDrag(false);
        hasMoved.current = false;
    };

    // 长按 220ms 后才允许拖拽
    const handlePressStart = (e) => {
        // 阻止冒泡，防止父级干扰
        e.stopPropagation();

        touchTimer.current = setTimeout(() => {
            setShouldDrag(true);
            if ("vibrate" in navigator) navigator.vibrate(30);
        }, 220);
    };

    // 手指移动 → 标记为“已移动”
    const handlePressMove = () => {

    };

    const handlePressEnd = (e) => {
        e.stopPropagation();
        clearTimeout(touchTimer.current);

        // 如果没有触发长按 → 是点击
        if (!shouldDrag) {
            onClick?.();
        }

        setShouldDrag(false);
    };

    return (
        <Draggable
            nodeRef={nodeRef}
            position={position}
            bounds={"parent"}
            onDrag={(e, data) => {
                hasMoved.current = true; // 标记正在拖
                setPosition({ x: data.x, y: data.y })
            }}
            onStop={handleStop}
            enableUserSelectHack={false}
        >
            <div
                ref={nodeRef}
                // 完全用 Touch 事件自己控制
                onTouchStart={handleTouchStart}
                onTouchMove={handleTouchMove}
                onTouchEnd={handleTouchEnd}
                // PC 端保留鼠标事件（兼容）
                onMouseDown={handlePressStart}
                onMouseMove={handlePressMove}
                onMouseUp={handlePressEnd}
                className={className}
            >
                {children}
            </div>

        </Draggable>
    );
}


export default DraggableNode;