/**
 * This annotation allows drawing a rectangle on a chart.
 *
 * It accepts either pixel coordinates or data values for positioning.
 *
 * In case it receives pixel coordinates, it uses a Rectangle component.
 * If data values are provided, it uses a ReferenceArea component.
 */
import React from 'react';
import { Rectangle, ReferenceArea } from 'recharts';
export function RectangleAnnotation({ annotation }) {
    const { pointA, pointB, positionType, label, style } = annotation;
    const { color = '#ccc', strokeWidth = 1, fill = '#ccc', opacity = 0.5, fillOpacity = 0.1, pointerEvents, } = style;
    if (!pointB) {
        return null;
    }
    if (positionType === 'data') {
        // Use ReferenceArea for data-based positioning
        if (!pointA.dataPoint || !pointB.dataPoint) {
            return null;
        }
        return (React.createElement(ReferenceArea, { x1: String(pointA.dataPoint.x), x2: String(pointB.dataPoint.x), y1: String(pointA.dataPoint.y), y2: String(pointB.dataPoint.y), stroke: color, strokeWidth: strokeWidth, strokeOpacity: opacity, fill: fill, fillOpacity: fillOpacity, style: { pointerEvents }, label: label }));
    }
    // For pixel-based positioning, use Rectangle component
    const x1Pixel = pointA.interactionCoordinate.x;
    const x2Pixel = pointB.interactionCoordinate.x;
    const y1Pixel = pointA.interactionCoordinate.y;
    const y2Pixel = pointB.interactionCoordinate.y;
    const x = Math.min(x1Pixel, x2Pixel);
    const y = Math.min(y1Pixel, y2Pixel);
    const width = Math.abs(x2Pixel - x1Pixel);
    const height = Math.abs(y2Pixel - y1Pixel);
    return (React.createElement("g", { style: { pointerEvents } },
        React.createElement(Rectangle, { x: x, y: y, width: width, height: height, stroke: color, strokeWidth: strokeWidth, fill: fill, fillOpacity: fillOpacity }),
        label && (React.createElement("text", { x: x + width / 2, y: y + height / 2, fill: label.style?.fill ?? color, fontSize: label.style?.fontSize ?? 10, fontWeight: label.style?.fontWeight ?? 'normal', textAnchor: "middle", dominantBaseline: "middle", pointerEvents: "none" }, label.value))));
}
