import React from 'react';
import { useChartHeight, useChartWidth, usePlotArea } from 'recharts';
import { SvgDimensionShower } from './utils/SvgDimensionShower.js';
import { ObjectInspector } from './generic/ObjectInspector.js';
import { useEventDispatch } from '../components/useEventDispatch.js';
const Overlay = () => {
    const plotArea = usePlotArea();
    const width = useChartWidth();
    const height = useChartHeight();
    if (plotArea == null || width == null || height == null) {
        return null;
    }
    return (React.createElement(React.Fragment, null,
        React.createElement(SvgDimensionShower, { width: width, height: plotArea.y, labels: { background: 'y', vertical: 'usePlotArea.y' } }),
        React.createElement(SvgDimensionShower, { width: plotArea.x, height: height, labels: { background: 'x', horizontal: 'usePlotArea.x' } }),
        React.createElement(SvgDimensionShower, { x: plotArea.x, y: plotArea.y, width: plotArea.width, height: plotArea.height, labels: {
                background: 'Plot area',
                horizontal: 'usePlotArea.width',
                vertical: 'usePlotArea.height',
            } })));
};
const Inspector = () => {
    const plotArea = usePlotArea();
    useEventDispatch(plotArea);
    return React.createElement(ObjectInspector, { obj: plotArea });
};
export const PlotAreaInspector = {
    Overlay,
    Inspector,
};
