import { jsx } from "react/jsx-runtime";
import { useContext, useEffect, useRef, useState } from "react";
import { cx } from "antd-style";
import { MenuContext } from "rc-menu/es/context/MenuContext";
import { useDesignable } from "../../hooks/index.mjs";
import { useStyles } from "./DragHandleMenu.style.mjs";
import { SortableContext } from "./SortableItem.mjs";
const DragHandleMenu = (props)=>{
    const { isSubMenu, name, children, className: overStyle, isAdminMenu } = props;
    const { draggable } = useContext(SortableContext);
    const { onOpenChange } = useContext(MenuContext) || {};
    const { designable } = useDesignable();
    const { attributes, listeners, setNodeRef, transform, isDragging } = draggable;
    const { styles } = useStyles();
    const ref = useRef(null);
    const [dimensions, setDimensions] = useState({
        width: 0,
        height: 0
    });
    const [initialPosition, setInitialPosition] = 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
            });
        }
    };
    useEffect(()=>{
        if (isSubMenu && isDragging) null == onOpenChange || onOpenChange(name, false);
    }, [
        isDragging
    ]);
    if (!designable) return children;
    return /*#__PURE__*/ jsx("div", {
        ref: setNodeRef,
        className: cx(styles.dragHandleMenu, {
            draggable: isDragging,
            leftBorder: isSubMenu && isDragging,
            adminMenu: isAdminMenu && isDragging
        }, overStyle),
        style: style,
        ...listeners,
        ...attributes,
        role: "none",
        onMouseDown: handleMouseDown,
        children: /*#__PURE__*/ jsx("div", {
            ref: ref,
            className: 'wrapper',
            children: children
        })
    });
};
export { DragHandleMenu };
