import { jsx as _jsx } from "react/jsx-runtime";
import { isEqual } from 'lodash-es';
import { useEffect, useMemo, useState } from 'react';
import { defaultTheme } from '../constants';
import { XMLViewerContext } from '../context/xml-viewer-context';
import useXMLViewer from '../hooks/useXMLViewer';
import { Elements } from './Elements';
import { InvalidXml } from './InvalidXml';
export function XMLViewer(props) {
    const { theme: customTheme, xml, collapsible = false, indentSize = 2, invalidXml, initalCollapsedDepth, initialCollapsedDepth, } = props;
    const [theme, setTheme] = useState(() => ({ ...defaultTheme, ...customTheme }));
    const { json, valid } = useXMLViewer(xml);
    const context = useMemo(() => ({
        theme,
        collapsible,
        indentSize,
        initialCollapsedDepth: initialCollapsedDepth ?? initalCollapsedDepth,
    }), [theme, collapsible, indentSize, initalCollapsedDepth, initialCollapsedDepth]);
    useEffect(() => {
        setTheme((currentTheme) => {
            const nextTheme = { ...defaultTheme, ...customTheme };
            return isEqual(nextTheme, currentTheme) ? currentTheme : nextTheme;
        });
    }, [customTheme]);
    if (!valid) {
        return invalidXml ? invalidXml : _jsx(InvalidXml, {});
    }
    return (_jsx(XMLViewerContext.Provider, { value: context, children: _jsx("div", { className: "rxv-container", style: { whiteSpace: 'pre-wrap', fontFamily: theme.fontFamily, overflowWrap: 'break-word' }, children: _jsx(Elements, { elements: json }) }) }));
}
//# sourceMappingURL=XMLViewer.js.map