import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function drawRoundedRect(context, x, y, width, height, radius) {
    context.beginPath();
    context.moveTo(x + radius, y);
    context.lineTo(x + width - radius, y);
    context.quadraticCurveTo(x + width, y, x + width, y + radius);
    context.lineTo(x + width, y + height - radius);
    context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    context.lineTo(x + radius, y + height);
    context.quadraticCurveTo(x, y + height, x, y + height - radius);
    context.lineTo(x, y + radius);
    context.quadraticCurveTo(x, y, x + radius, y);
    context.closePath();
}
function truncateCanvasText(context, text, maxWidth) {
    if (context.measureText(text).width <= maxWidth)
        return text;
    const ellipsis = "...";
    let low = 0;
    let high = text.length;
    while (low < high) {
        const middle = Math.ceil((low + high) / 2);
        const candidate = `${text.slice(0, middle)}${ellipsis}`;
        if (context.measureText(candidate).width <= maxWidth) {
            low = middle;
        }
        else {
            high = middle - 1;
        }
    }
    return `${text.slice(0, low)}${ellipsis}`;
}
/**
 * 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: "border-border-default rounded-md border 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: var(--color-white); box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-neutral-grey-100) 10%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--color-neutral-grey-100) 6%, transparent); border-radius: 0.375rem; border: 1px solid var(--color-border-default); 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;";
    const countSpan = document.createElement("span");
    countSpan.style.cssText = "font-weight: 700; margin-right: 0.25rem;";
    countSpan.textContent = String(count);
    const nounSpan = document.createElement("span");
    nounSpan.textContent = noun;
    temp.append(countSpan, nounSpan);
    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;
}
/**
 * Canvas-backed drag image for content tree items.
 *
 * Chrome on macOS can snapshot the full tree row with an opaque background when
 * using the native drag image. Drawing the preview ourselves preserves alpha.
 */
export function setContentTreeItemDragImage(event, label) {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    if (!context)
        return () => { };
    const icon = event.currentTarget?.querySelector("img");
    const pixelRatio = window.devicePixelRatio || 1;
    const shadowPadding = 6;
    const previewHeight = 30;
    const iconSize = icon ? 16 : 0;
    const iconGap = icon ? 8 : 0;
    const horizontalPadding = 10;
    const maxTextWidth = 220;
    const font = '12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
    context.font = font;
    const text = truncateCanvasText(context, label || "Item", maxTextWidth);
    const textWidth = Math.ceil(context.measureText(text).width);
    const previewWidth = horizontalPadding * 2 + iconSize + iconGap + textWidth;
    const canvasWidth = previewWidth + shadowPadding * 2;
    const canvasHeight = previewHeight + shadowPadding * 2;
    canvas.width = Math.ceil(canvasWidth * pixelRatio);
    canvas.height = Math.ceil(canvasHeight * pixelRatio);
    canvas.style.width = `${canvasWidth}px`;
    canvas.style.height = `${canvasHeight}px`;
    context.scale(pixelRatio, pixelRatio);
    context.font = font;
    context.textBaseline = "middle";
    const x = shadowPadding;
    const y = shadowPadding;
    context.save();
    context.shadowColor =
        "color-mix(in srgb, var(--color-neutral-grey-100) 18%, transparent)";
    context.shadowBlur = 6;
    context.shadowOffsetY = 2;
    drawRoundedRect(context, x, y, previewWidth, previewHeight, 6);
    context.fillStyle = "color-mix(in srgb, var(--color-white) 78%, transparent)";
    context.fill();
    context.restore();
    drawRoundedRect(context, x, y, previewWidth, previewHeight, 6);
    context.strokeStyle =
        "color-mix(in srgb, var(--color-neutral-grey-50) 55%, transparent)";
    context.lineWidth = 1;
    context.stroke();
    let textX = x + horizontalPadding;
    if (icon) {
        try {
            if (icon.complete && icon.naturalWidth > 0) {
                context.drawImage(icon, textX, y + (previewHeight - iconSize) / 2, iconSize, iconSize);
            }
        }
        catch { }
        textX += iconSize + iconGap;
    }
    context.fillStyle = "var(--color-neutral-grey-100)";
    context.fillText(text, textX, y + previewHeight / 2);
    try {
        event.dataTransfer.setDragImage(canvas, shadowPadding + 12, shadowPadding + previewHeight / 2);
    }
    catch { }
    return () => { };
}
/**
 * Color mapping for component drag images
 */
const bgColorMap = {
    shared: "var(--color-component-shared)", // orange-400
    readonly: "var(--color-neutral-grey-50)", // gray-400
    layout: "var(--color-component-layout)", // purple-400
    default: "var(--color-component-default)", // component-default (approximate)
    nonMovable: "var(--color-feedback-red)", // red-400
    suggestions: "var(--color-component-suggestions)", // 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: var(--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 color-mix(in srgb, var(--color-neutral-grey-100) 10%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--color-neutral-grey-100) 6%, transparent);`;
    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