import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Lightweight React component for consistent multi-select drag previews.
 * Use with renderToString or by creating a DOM node and setting innerHTML.
 */
export function DragMultiSelectPreview({ count, noun = "items", }) {
    return (_jsx("div", { className: "rounded-md border border-gray-300 bg-white px-4 py-2 pl-8 text-sm shadow-md", children: _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "mr-1 font-bold", children: count }), _jsx("span", { children: noun })] }) }));
}
/**
 * Imperative helper to attach a consistent multi-select drag image.
 * Returns a cleanup function that removes the temporary element.
 */
export function setMultiDragImage(event, count, noun = "items") {
    const temp = document.createElement("div");
    // Use inline styles to ensure background is properly rendered in drag image
    temp.style.cssText =
        "background-color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-radius: 0.375rem; border: 1px solid #d1d5db; padding: 0.5rem 1rem 0.5rem 2rem; font-size: 0.875rem; position: absolute; top: -1000px; left: -1000px; display: flex; align-items: center; white-space: nowrap;";
    temp.innerHTML = `<span style="font-weight: 700; margin-right: 0.25rem;">${count}</span> <span>${noun}</span>`;
    document.body.appendChild(temp);
    try {
        event.dataTransfer.setDragImage(temp, 15, 15);
    }
    catch { }
    const cleanup = () => {
        try {
            document.body.removeChild(temp);
        }
        catch { }
    };
    // Defer cleanup to next tick so the drag image is captured.
    setTimeout(cleanup, 0);
    return cleanup;
}
/**
 * Color mapping for component drag images
 */
const bgColorMap = {
    shared: "#fb923c", // orange-400
    readonly: "#9ca3af", // gray-400
    layout: "#a78bfa", // purple-400
    default: "#3b82f6", // component-blue (approximate)
    nonMovable: "#f87171", // red-400
    suggestions: "#2dd4bf", // teal-400
};
/**
 * Imperative helper to attach a drag image for a single component.
 * Returns a cleanup function that removes the temporary element.
 */
export function setComponentDragImage(event, componentName, color = "default") {
    const bgColor = bgColorMap[color] || bgColorMap.default;
    const temp = document.createElement("div");
    // Use inline styles to ensure background is properly rendered in drag image
    temp.style.cssText =
        `background-color: ${bgColor}; color: white; border-radius: 0.25rem; padding: 0.5rem 1rem; font-size: 0.875rem; position: absolute; top: -1000px; left: -1000px; display: flex; align-items: center; white-space: nowrap; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`;
    temp.textContent = componentName;
    document.body.appendChild(temp);
    try {
        event.dataTransfer.setDragImage(temp, 15, 15);
    }
    catch { }
    const cleanup = () => {
        try {
            document.body.removeChild(temp);
        }
        catch { }
    };
    // Defer cleanup to next tick so the drag image is captured.
    setTimeout(cleanup, 0);
    return cleanup;
}
//# sourceMappingURL=DragPreview.js.map