import { jsx as _jsx } from "react/jsx-runtime";
import cx from "classnames";
import { useDashboardSelector } from "../../model/react/DashboardStoreProvider.js";
import { selectIsInEditMode } from "../../model/store/renderMode/renderModeSelectors.js";
import { useWidgetDragEndHandler } from "./draggableWidget/useWidgetDragEndHandler.js";
import { useDashboardDrag } from "./useDashboardDrag.js";
/**

/**
 * @internal
 */
export function WrapCreatePanelItemWithDrag(props) {
    const { canDrag, dragItem, hideDefaultPreview, onDragEnd, onDragStart, children } = useWrapCreatePanelItemWithDrag(props);
    const [{ isDragging }, dragRef] = useDashboardDrag({
        dragItem,
        canDrag,
        hideDefaultPreview,
        dragEnd: (_, monitor) => {
            onDragEnd?.(monitor.didDrop());
        },
        dragStart: onDragStart,
    }, [canDrag, onDragEnd, hideDefaultPreview, dragItem]);
    return (_jsx("div", { ref: dragRef, className: cx({ "is-dragging": isDragging }), children: children }));
}
/**
 * @internal
 */
export function useWrapCreatePanelItemWithDrag(props) {
    const isInEditMode = useDashboardSelector(selectIsInEditMode);
    const onDragEnd = useWidgetDragEndHandler();
    const canDrag = isInEditMode && !props.disabled;
    return {
        ...props,
        canDrag,
        onDragEnd,
    };
}
