/**
 * @fileOverview RechartsAnnotations component for adding interactive annotations to charts.
 *
 * This component follows the same pattern as RechartsDevtools:
 * - Renders SVG overlays directly in the chart context
 * - Uses a portal to render the UI controls in an external container
 *
 * Usage:
 * ```tsx
 * <AreaChart data={data}>
 *   <XAxis dataKey="name" />
 *   <YAxis />
 *   <Area dataKey="value" />
 *   <RechartsAnnotations />
 * </AreaChart>
 * ```
 */
import React from 'react';
import { createPortal } from 'react-dom';
import { RECHARTS_ANNOTATIONS_PORTAL_ID } from '../constants.js';
import { useRechartsDevtoolsContext } from '../context/RechartsDevtoolsContext.js';
import { AnnotationsController, RenderAnnotations, useAnnotationsManager } from '../annotations/index.js';
export const RechartsAnnotations = () => {
    const contextId = useRechartsDevtoolsContext();
    // Use annotations-specific portal ID, falling back to global constant
    const portalId = contextId ? `${contextId}-annotations` : RECHARTS_ANNOTATIONS_PORTAL_ID;
    const [container, setContainer] = React.useState(null);
    const annotationsManager = useAnnotationsManager();
    React.useEffect(() => {
        const el = document.getElementById(portalId);
        setContainer(el);
    }, [portalId]);
    return (React.createElement(React.Fragment, null,
        React.createElement(RenderAnnotations, { annotations: annotationsManager.annotations, isAdding: annotationsManager.isAdding, followerPosition: annotationsManager.followerPosition, firstClickPosition: annotationsManager.firstClickPosition, snapMode: annotationsManager.snapMode, onChartClick: annotationsManager.onChartClick, onChartMouseDown: annotationsManager.onChartMouseDown, onChartMouseUp: annotationsManager.onChartMouseUp, onChartMouseMove: annotationsManager.onChartMouseMove, onChartMouseLeave: annotationsManager.onChartMouseLeave }),
        container &&
            createPortal(React.createElement("div", { className: "recharts-annotations", style: { fontFamily: 'monospace', fontSize: '12px' } },
                React.createElement(AnnotationsController, { annotations: annotationsManager.annotations, isAdding: annotationsManager.isAdding, selectedAnnotationId: annotationsManager.selectedAnnotationId, snapMode: annotationsManager.snapMode, onStartAdding: annotationsManager.startAddingAnnotation, onCancelAdding: annotationsManager.cancelAddingAnnotation, onDeleteAnnotation: annotationsManager.deleteAnnotation, onUpdateAnnotation: annotationsManager.updateAnnotation, onSelectAnnotation: annotationsManager.selectAnnotation, onSnapModeChange: annotationsManager.setSnapMode })), container)));
};
