import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Collapse } from '../../Collapse';
import { Typography } from '../../Typography';
import { NodeValue } from '../NodeValue';
import { Chevron, IconWrapper, NodeContainer } from './styles';
import { useLogic } from './useLogic';
export const JsonNode = (props) => {
    const { isExpandable, isExpanded, value, level, color, nodeKey, icon, type, getNestedKeyPath, toggleExpanded, checkExpanded, handleToggle, } = useLogic(props);
    const renderChildren = () => {
        if (!isExpandable || !isExpanded) {
            return null;
        }
        if (Array.isArray(value)) {
            return value.map((item, index) => {
                const keyPath = getNestedKeyPath(index);
                return (_jsx(JsonNode, { keyPath: keyPath, nodeKey: index, value: item, level: level + 1, toggleExpanded: toggleExpanded, checkExpanded: checkExpanded }, keyPath));
            });
        }
        if (typeof value === 'object' && value !== null) {
            return Object.entries(value).map(([key, val]) => {
                const keyPath = getNestedKeyPath(key);
                return (_jsx(JsonNode, { keyPath: keyPath, nodeKey: key, value: val, level: level + 1, toggleExpanded: toggleExpanded, checkExpanded: checkExpanded }, keyPath));
            });
        }
        return null;
    };
    return (_jsxs(_Fragment, { children: [_jsxs(NodeContainer, { level: level, isExpandable: isExpandable, onClick: handleToggle, children: [isExpandable ? (_jsx(Chevron, { isExpanded: isExpanded })) : (_jsx(IconWrapper, { color: color, children: icon })), _jsxs(Typography, { component: "dt", children: [nodeKey, ":"] }), _jsx(NodeValue, { value: value, color: color, type: type })] }), isExpandable && _jsx(Collapse, { in: isExpanded, children: renderChildren() })] }));
};
