import React from 'react';
import { createPortal } from 'react-dom';
import { RECHARTS_DEVTOOLS_PORTAL_ID } from '../constants.js';
import { ChartDimensionInspector } from '../inspectors/ChartDimensionInspector.js';
import { MarginInspector } from '../inspectors/MarginInspector.js';
import { OffsetInspector } from '../inspectors/OffsetInspector.js';
import { PlotAreaInspector } from '../inspectors/PlotAreaInspector.js';
import { UseActiveTooltipDataPointsInspector } from '../inspectors/UseActiveTooltipDataPointsInspector.js';
import { XAxisDomainInspector } from '../inspectors/XAxisDomainInspector.js';
import { YAxisDomainInspector } from '../inspectors/YAxisDomainInspector.js';
import { ActiveTooltipLabelInspector } from '../inspectors/ActiveTooltipLabelInspector.js';
import { useSessionStorageState } from '../hooks/useSessionStorageState.js';
import { useRechartsDevtoolsContext } from '../context/RechartsDevtoolsContext.js';
import { RechartsAnnotations } from './RechartsAnnotations.js';
import { YAxisTicksInspector } from '../inspectors/YAxisTicksInspector.js';
import { XAxisTicksInspector } from '../inspectors/XAxisTicksInspector.js';
const INSPECTORS = {
    'useChartWidth | useChartHeight': ChartDimensionInspector,
    useMargin: MarginInspector,
    useOffset: OffsetInspector,
    usePlotArea: PlotAreaInspector,
    useActiveTooltipDataPoints: UseActiveTooltipDataPointsInspector,
    useXAxisDomain: XAxisDomainInspector,
    useYAxisDomain: YAxisDomainInspector,
    useActiveTooltipLabel: ActiveTooltipLabelInspector,
    useXAxisTicks: XAxisTicksInspector,
    useYAxisTicks: YAxisTicksInspector,
};
const isValidInspectorKey = (key) => {
    return key != null && key in INSPECTORS;
};
function useSelectedInspector() {
    const [selectedInspectorId, setSelectedInspectorId] = useSessionStorageState('selectedRechartsDevtoolsInspector', 'useChartWidth | useChartHeight');
    const selectedInspector = INSPECTORS[selectedInspectorId];
    if (!selectedInspector) {
        setSelectedInspectorId('useChartWidth | useChartHeight');
    }
    return { selectedInspectorId, setSelectedInspectorId, selectedInspector };
}
export const RechartsDevtools = () => {
    const contextId = useRechartsDevtoolsContext();
    const portalId = contextId ?? RECHARTS_DEVTOOLS_PORTAL_ID;
    const { selectedInspectorId, setSelectedInspectorId, selectedInspector } = useSelectedInspector();
    const [container, setContainer] = React.useState(null);
    const selectId = React.useId();
    React.useEffect(() => {
        const el = document.getElementById(portalId);
        setContainer(el);
        if (el) {
            const initialTab = el.getAttribute('data-initial-tab');
            if (isValidInspectorKey(initialTab)) {
                setSelectedInspectorId(initialTab);
            }
        }
    }, [portalId, setSelectedInspectorId]);
    const [isOverlayEnabled, setIsOverlayEnabled] = useSessionStorageState('rechartsDevtoolsOverlayEnabled', false);
    const Inspector = selectedInspector?.Inspector;
    const Overlay = selectedInspector?.Overlay;
    return (React.createElement(React.Fragment, null,
        Overlay && isOverlayEnabled && React.createElement(Overlay, null),
        container &&
            selectedInspector &&
            createPortal(React.createElement("div", { className: "recharts-devtools", style: { fontFamily: 'monospace', fontSize: '12px' } },
                React.createElement("div", { style: {
                        marginBottom: '10px',
                        paddingBottom: '10px',
                        borderBottom: '1px solid #ccc',
                    } },
                    React.createElement("div", { style: { display: 'flex', alignItems: 'center', marginBottom: '4px', gap: '8px' } },
                        React.createElement("label", { htmlFor: selectId }, "Inspect Hook:"),
                        React.createElement("select", { id: selectId, value: selectedInspectorId, onChange: (e) => setSelectedInspectorId(e.target.value), style: { padding: '4px' } }, Object.keys(INSPECTORS).map((key) => (React.createElement("option", { key: key, value: key }, key)))),
                        Overlay && (React.createElement("div", { style: { marginTop: '4px' } },
                            React.createElement("label", { style: { cursor: 'pointer', display: 'flex', alignItems: 'center' } },
                                React.createElement("input", { type: "checkbox", checked: isOverlayEnabled, onChange: (e) => setIsOverlayEnabled(e.target.checked), style: { marginRight: '4px' } }),
                                "Show Overlay on chart"))))),
                React.createElement("div", { style: { padding: '10px 0' } },
                    React.createElement(Inspector, null))), container),
        React.createElement(RechartsAnnotations, null)));
};
