import { jsxs, jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { useGanttContext, useGanttInteraction } from './GanttChart.js';
import { buildDependencyArrows } from './GanttChart.utils.js';

const GanttDependencyArrows = () => {
    const { tasks, rows, dayWidth, rowHeight, rangeStart } = useGanttContext();
    const { hoveredTaskId, activeDrag } = useGanttInteraction();
    const arrows = useMemo(() => buildDependencyArrows(tasks, rows, dayWidth, rowHeight, rangeStart, activeDrag), [tasks, rows, dayWidth, rowHeight, rangeStart, activeDrag]);
    if (arrows.length === 0)
        return null;
    // When a task is hovered, determine which arrows are connected to it
    const isArrowConnected = (arrowId) => {
        if (!hoveredTaskId)
            return false;
        // Arrow id format: "sourceId->targetId"
        const [sourceId, targetId] = arrowId.split("->");
        return sourceId === hoveredTaskId || targetId === hoveredTaskId;
    };
    return (jsxs("svg", { className: "absolute inset-0 pointer-events-none", style: { overflow: "visible" }, children: [jsxs("defs", { children: [jsx("marker", { id: "gantt-arrowhead", markerWidth: "8", markerHeight: "6", refX: "8", refY: "3", orient: "auto", children: jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: "var(--color-text-secondary, #888)" }) }), jsx("marker", { id: "gantt-arrowhead-highlight", markerWidth: "8", markerHeight: "6", refX: "8", refY: "3", orient: "auto", children: jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: "var(--color-primary, #3B82F6)" }) })] }), arrows.map((arrow) => {
                const connected = isArrowConnected(arrow.id);
                const faded = hoveredTaskId !== null && !connected;
                return (jsx("path", { d: arrow.d, fill: "none", stroke: connected
                        ? "var(--color-primary, #3B82F6)"
                        : "var(--color-text-secondary, #888)", strokeWidth: connected ? 2.5 : 1.5, strokeDasharray: arrow.isBackward ? "4 3" : undefined, markerEnd: connected
                        ? "url(#gantt-arrowhead-highlight)"
                        : "url(#gantt-arrowhead)", opacity: faded ? 0.15 : connected ? 1 : 0.6, style: {
                        transition: activeDrag
                            ? "none"
                            : "opacity 0.15s, stroke-width 0.15s",
                    } }, arrow.id));
            })] }));
};

export { GanttDependencyArrows };
