import { jsx } from "react/jsx-runtime";
import { useContext, useRef, useState } from "react";
import { cx } from "antd-style";
import { useDesignable } from "../../hooks/index.mjs";
import { useStyles } from "./DragHandlePageTab.style.mjs";
import { SortableContext } from "./SortableItem.mjs";
const DragHandlePageTab = (props)=>{
    const { isSubMenu, children, className: overStyle, isAdminMenu } = props;
    const { draggable } = useContext(SortableContext);
    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 style = {
        position: isDragging ? 'fixed' : 'static',
        top: isDragging ? initialPosition.y - 5 * dimensions.height : 0,
        left: isDragging ? initialPosition.x - dimensions.width : 0,
        width: isDragging ? 'max-content' : '100%',
        height: isDragging ? 'max-content' : '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 8px 24px 4px rgba(0,0,0,0.18)' : 'none',
        WebkitTransform: transform ? "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale(").concat(isDragging ? 1.05 : 1, ")") : void 0,
        WebkitPerspective: isDragging ? 1000 : void 0,
        isolation: isDragging ? 'isolate' : void 0
    };
    const handleMouseDown = (event)=>{
        if (ref.current) {
            const { width, height } = ref.current.getBoundingClientRect();
            const { clientX, clientY } = event;
            setDimensions({
                width,
                height
            });
            setInitialPosition({
                x: clientX,
                y: clientY
            });
        }
    };
    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 { DragHandlePageTab };
