import React from 'react';

/**
 * minimap.ts — Zoom navigator / minimap component for editors.
 *
 * Provides a small overview of the full canvas with a viewport indicator
 * that can be dragged to navigate around the document.
 */
// ── Component ───────────────────────────────────────────────────
/** Zoom navigator / minimap showing a scaled-down view of the full document. */
const Minimap = ({ canvasRef, imageDataUrl, documentWidth, documentHeight, viewport, onViewportChange, config = {}, className = "", }) => {
    const { width: mapW = 160, height: mapH = 120, visible = true, position = "bottom-right", opacity = 0.85, } = config;
    const minimapCanvasRef = React.useRef(null);
    const isDragging = React.useRef(false);
    const scaleX = mapW / (documentWidth || 1);
    const scaleY = mapH / (documentHeight || 1);
    const scale = Math.min(scaleX, scaleY);
    // Draw minimap
    React.useEffect(() => {
        if (!visible)
            return;
        const canvas = minimapCanvasRef.current;
        if (!canvas)
            return;
        const ctx = canvas.getContext("2d");
        if (!ctx)
            return;
        ctx.clearRect(0, 0, mapW, mapH);
        // Draw background
        ctx.fillStyle = "#1a1a2e";
        ctx.fillRect(0, 0, mapW, mapH);
        // Draw document content
        if (canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current) {
            const sw = documentWidth * scale;
            const sh = documentHeight * scale;
            ctx.drawImage(canvasRef.current, 0, 0, documentWidth, documentHeight, 0, 0, sw, sh);
        }
        else if (imageDataUrl) {
            const img = new Image();
            img.onload = () => {
                const sw = documentWidth * scale;
                const sh = documentHeight * scale;
                ctx.drawImage(img, 0, 0, sw, sh);
                drawViewport(ctx);
            };
            img.src = imageDataUrl;
            return;
        }
        drawViewport(ctx);
    }, [visible, canvasRef, imageDataUrl, viewport, documentWidth, documentHeight, scale, mapW, mapH]);
    function drawViewport(ctx) {
        // Draw viewport rect
        const vx = viewport.x * scale;
        const vy = viewport.y * scale;
        const vw = viewport.width * scale;
        const vh = viewport.height * scale;
        ctx.strokeStyle = "rgba(59, 130, 246, 0.8)";
        ctx.lineWidth = 1.5;
        ctx.strokeRect(vx, vy, vw, vh);
        // Dim areas outside viewport
        ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
        // Top
        ctx.fillRect(0, 0, mapW, vy);
        // Bottom
        ctx.fillRect(0, vy + vh, mapW, mapH - vy - vh);
        // Left
        ctx.fillRect(0, vy, vx, vh);
        // Right
        ctx.fillRect(vx + vw, vy, mapW - vx - vw, vh);
    }
    const handlePointerDown = (e) => {
        isDragging.current = true;
        updateViewportFromPointer(e);
        e.target.setPointerCapture(e.pointerId);
    };
    const handlePointerMove = (e) => {
        if (!isDragging.current)
            return;
        updateViewportFromPointer(e);
    };
    const handlePointerUp = () => {
        isDragging.current = false;
    };
    function updateViewportFromPointer(e) {
        var _a;
        const rect = (_a = minimapCanvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
        if (!rect || !onViewportChange)
            return;
        const mx = e.clientX - rect.left;
        const my = e.clientY - rect.top;
        const docX = mx / scale - viewport.width / 2;
        const docY = my / scale - viewport.height / 2;
        onViewportChange({
            x: Math.max(0, Math.min(documentWidth - viewport.width, docX)),
            y: Math.max(0, Math.min(documentHeight - viewport.height, docY)),
            width: viewport.width,
            height: viewport.height,
        });
    }
    if (!visible)
        return null;
    const positionStyles = {
        "top-left": { top: 8, left: 8 },
        "top-right": { top: 8, right: 8 },
        "bottom-left": { bottom: 8, left: 8 },
        "bottom-right": { bottom: 8, right: 8 },
    };
    return React.createElement("div", {
        className: `nice-minimap ${className}`,
        style: {
            position: "absolute",
            ...positionStyles[position],
            opacity,
            borderRadius: 4,
            overflow: "hidden",
            border: "1px solid rgba(255,255,255,0.2)",
            cursor: "crosshair",
            zIndex: 100,
        },
    }, React.createElement("canvas", {
        ref: minimapCanvasRef,
        width: mapW,
        height: mapH,
        onPointerDown: handlePointerDown,
        onPointerMove: handlePointerMove,
        onPointerUp: handlePointerUp,
        style: { display: "block" },
    }));
};
// ── Hook ────────────────────────────────────────────────────────
/** Hook for managing minimap visibility state. */
function useMinimap(initialVisible = true) {
    const [visible, setVisible] = React.useState(initialVisible);
    const toggle = React.useCallback(() => setVisible((v) => !v), []);
    return { visible, setVisible, toggle };
}

export { Minimap, useMinimap };
//# sourceMappingURL=minimap.js.map
