import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE_antd_style__ from "antd-style";
import * as __WEBPACK_EXTERNAL_MODULE_rc_menu_es_context_MenuContext__ from "rc-menu/es/context/MenuContext";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_index_mjs__ from "../../hooks/index.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__DragHandleMenu_style_mjs__ from "./DragHandleMenu.style.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__SortableItem_mjs__ from "./SortableItem.mjs";
const DragHandleMenu = (props)=>{
    const { isSubMenu, name, children, className: overStyle, isAdminMenu } = props;
    const { draggable } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__SortableItem_mjs__.SortableContext);
    const { onOpenChange } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE_rc_menu_es_context_MenuContext__.MenuContext) || {};
    const { designable } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_mjs__.useDesignable)();
    const { attributes, listeners, setNodeRef, transform, isDragging } = draggable;
    const { styles } = (0, __WEBPACK_EXTERNAL_MODULE__DragHandleMenu_style_mjs__.useStyles)();
    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
    const [dimensions, setDimensions] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({
        width: 0,
        height: 0
    });
    const [initialPosition, setInitialPosition] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({
        x: 0,
        y: 0
    });
    const centerOffset = {
        x: dimensions.width / 4,
        y: dimensions.height / 4
    };
    const style = {
        position: isDragging ? 'fixed' : 'static',
        top: isDragging ? initialPosition.y - centerOffset.y : 0,
        left: isDragging ? initialPosition.x - centerOffset.x : 0,
        width: isDragging ? dimensions.width : '100%',
        height: isDragging ? dimensions.height : '100%',
        zIndex: isDragging ? 999 : 'auto',
        pointerEvents: isDragging ? 'none' : 'auto',
        transform: transform ? "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale(").concat(isDragging ? 1.05 : 1, ")") : void 0,
        boxShadow: isDragging ? '0 4px 8px rgba(0, 0, 0, 0.1)' : 'none'
    };
    const handleMouseDown = (event)=>{
        if (ref.current) {
            const { width, height } = ref.current.getBoundingClientRect();
            const { clientX, clientY } = event;
            setDimensions({
                width,
                height
            });
            setInitialPosition({
                x: clientX,
                y: clientY
            });
        }
    };
    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
        if (isSubMenu && isDragging) null == onOpenChange || onOpenChange(name, false);
    }, [
        isDragging
    ]);
    if (!designable) return children;
    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
        ref: setNodeRef,
        className: (0, __WEBPACK_EXTERNAL_MODULE_antd_style__.cx)(styles.dragHandleMenu, {
            draggable: isDragging,
            leftBorder: isSubMenu && isDragging,
            adminMenu: isAdminMenu && isDragging
        }, overStyle),
        style: style,
        ...listeners,
        ...attributes,
        role: "none",
        onMouseDown: handleMouseDown,
        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
            ref: ref,
            className: 'wrapper',
            children: children
        })
    });
};
export { DragHandleMenu };
