import { jsx as _jsx } from "react/jsx-runtime";
import classNames from "classnames";
import { INSIGHT_WIDGET_SIZE_INFO_DEFAULT } from "@gooddata/sdk-ui-ext";
import { getSizeInfo } from "../../_staging/layout/sizing.js";
import { useDashboardSelector } from "../../model/react/DashboardStoreProvider.js";
import { selectSettings } from "../../model/store/config/configSelectors.js";
import { selectIsInEditMode } from "../../model/store/renderMode/renderModeSelectors.js";
import { useWidgetDragEndHandler } from "./draggableWidget/useWidgetDragEndHandler.js";
import { useDashboardDrag } from "./useDashboardDrag.js";
/**
 * @internal
 */
export function WrapInsightListItemWithDrag({ children, insight, onDragStart, }) {
    const isInEditMode = useDashboardSelector(selectIsInEditMode);
    const settings = useDashboardSelector(selectSettings);
    const handleDragEnd = useWidgetDragEndHandler();
    const [{ isDragging }, dragRef] = useDashboardDrag({
        dragItem: () => {
            const sizeInfo = getSizeInfo(settings, "insight", insight);
            return {
                type: "insightListItem",
                insight,
                size: {
                    gridHeight: sizeInfo.height.default || INSIGHT_WIDGET_SIZE_INFO_DEFAULT.height.default,
                    gridWidth: sizeInfo.width.default || INSIGHT_WIDGET_SIZE_INFO_DEFAULT.width.default,
                },
            };
        },
        canDrag: isInEditMode,
        hideDefaultPreview: false,
        dragEnd: handleDragEnd,
        dragStart: onDragStart,
    }, [isInEditMode, insight, handleDragEnd]);
    return (_jsx("div", { className: classNames({ "is-dragging": isDragging }), ref: dragRef, children: children }));
}
