"use client";
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { useEditContext } from "../client/editContext";
import { useSlotContext } from "../views/editorSlotContext";
import { getAllPlaceholders } from "../componentTreeHelper";
import { useOverlayMeasurement } from "../page-editor-chrome/overlay/useOverlayMeasurement";
import { measureBridgePlaceholderRect, } from "../page-editor-chrome/overlay/geometry";
import { computePlaceholderZones, isInsideLayoutComponent, } from "../page-editor-chrome/overlay/placeholderZones";
import { cn } from "../../lib/utils";
const LINE_THICKNESS = 1.5;
const LINE_LENGTH_SCALE = 0.88;
/**
 * During a drag, surface every possible drop location in the minimap as a thin
 * bar across its placeholder - mirroring the canvas {@link InsertionLine} so the
 * minimap reads the same way as the page. On the canvas the line takes over and
 * {@link PlaceholderDropZones} hides its "+" dots; the minimap has no insertion
 * line, so without this it would show nothing while dragging. Purely visual
 * (pointer-events-none) and reuses the exact same `computePlaceholderZones`
 * resolver, so the bars line up 1:1 with the real drop targets.
 */
export function MinimapDropTargets({ pageViewContext, }) {
    const [placeholders, setPlaceholders] = useState([]);
    const editContext = useEditContext();
    const slotContext = useSlotContext();
    useEffect(() => {
        if (!pageViewContext?.page)
            return;
        setPlaceholders(getAllPlaceholders(pageViewContext.page));
    }, [pageViewContext?.page]);
    const dropZones = useOverlayMeasurement((metrics) => {
        if (!slotContext?.isActive || !editContext?.dragObject)
            return [];
        const zones = computePlaceholderZones({
            placeholders,
            geometry: pageViewContext.bridgeGeometry,
            metrics,
            dragObject: editContext?.dragObject,
            selectedForInsertion: editContext?.selectedForInsertion,
            insertMode: editContext?.insertMode,
            showLayoutComponents: editContext?.showLayoutComponents,
        });
        // Each gap draws a bar spanning its placeholder; measure each placeholder
        // once and reuse it across that placeholder's gaps.
        const rectCache = new Map();
        const result = [];
        for (const zone of zones) {
            const key = zone.placeholder.key;
            let rect = rectCache.get(key);
            if (rect === undefined) {
                rect =
                    measureBridgePlaceholderRect(pageViewContext.bridgeGeometry, key, metrics)?.rect ?? null;
                rectCache.set(key, rect);
            }
            if (!rect)
                continue;
            result.push({
                zone,
                placeholderRect: rect,
                isLayoutZone: computeIsLayoutZone(zone),
            });
        }
        return result;
    }, [
        slotContext?.isActive,
        pageViewContext,
        pageViewContext?.bridgeGeometry,
        editContext?.dragObject,
        editContext?.selectedForInsertion,
        editContext?.insertMode,
        editContext?.showLayoutComponents,
        placeholders,
    ], {
        initialValue: [],
        equals: minimapDropZonesEqual,
        interests: ["viewport", "layout", "adornment-data"],
    });
    if (!dropZones.length || !editContext?.dragObject)
        return null;
    return (_jsx(_Fragment, { children: dropZones.map(({ zone, placeholderRect, isLayoutZone }, index) => {
            const isVerticalPlaceholder = zone.orientation === "vertical";
            const scaledLength = getScaledLineLength(isVerticalPlaceholder ? placeholderRect.width : placeholderRect.height);
            const lineInset = ((isVerticalPlaceholder
                ? placeholderRect.width
                : placeholderRect.height) -
                scaledLength) /
                2;
            const barStyle = isVerticalPlaceholder
                ? {
                    left: placeholderRect.x + lineInset,
                    top: zone.position.y - LINE_THICKNESS / 2,
                    width: scaledLength,
                    height: LINE_THICKNESS,
                }
                : {
                    left: zone.position.x - LINE_THICKNESS / 2,
                    top: placeholderRect.y + lineInset,
                    width: LINE_THICKNESS,
                    height: scaledLength,
                };
            return (_jsx("div", { "data-testid": "minimap-drop-target", className: cn("pointer-events-none absolute rounded-full", isLayoutZone ? "bg-highlight-100" : "bg-component-default"), style: {
                    ...barStyle,
                    // Thin white outline so the bar stays legible over the scaled page.
                    boxShadow: "0 0 0 0.5px rgba(255, 255, 255, 0.85)",
                } }, index));
        }) }));
}
function getScaledLineLength(length) {
    return Math.max(1, length * LINE_LENGTH_SCALE);
}
function minimapDropZonesEqual(a, b) {
    if (a.length !== b.length)
        return false;
    for (let i = 0; i < a.length; i++) {
        const x = a[i];
        const y = b[i];
        if (!x || !y)
            return false;
        if (x.isLayoutZone !== y.isLayoutZone ||
            x.zone.orientation !== y.zone.orientation ||
            x.zone.position.x !== y.zone.position.x ||
            x.zone.position.y !== y.zone.position.y ||
            x.placeholderRect.x !== y.placeholderRect.x ||
            x.placeholderRect.y !== y.placeholderRect.y ||
            x.placeholderRect.width !== y.placeholderRect.width ||
            x.placeholderRect.height !== y.placeholderRect.height) {
            return false;
        }
    }
    return true;
}
function computeIsLayoutZone(zone) {
    const components = zone.placeholder.components;
    const prev = zone.index >= 1 ? components[zone.index - 1] : null;
    const next = zone.index < components.length ? components[zone.index] : null;
    const adjacentToLayout = !!prev?.layoutId || !!next?.layoutId;
    return (adjacentToLayout ||
        isInsideLayoutComponent(zone.placeholder.parentComponent));
}
//# sourceMappingURL=MinimapDropTargets.js.map