import { jsx, jsxs } from "react/jsx-runtime";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import { styled } from "@mui/material";
import apollo_core from "@uipath/apollo-core";
import { useState } from "react";
const SectionArrowIcon = styled(KeyboardArrowRight, {
    shouldForwardProp: (prop)=>'expanded' !== prop
})(({ expanded })=>({
        marginRight: apollo_core.Spacing.SpacingXs,
        transition: 'transform 0.2s ease',
        cursor: 'pointer',
        transform: expanded ? 'rotate(90deg)' : 'none',
        width: apollo_core.FontFamily.FontMSize,
        height: apollo_core.FontFamily.FontMSize
    }));
const Value = styled('span')({
    color: 'var(--color-foreground-de-emp)',
    flex: 1
});
const NestedObjectContainer = styled('div')({
    paddingLeft: apollo_core.Spacing.SpacingXs
});
const ExpandButton = styled('button')({
    background: 'none',
    border: 'none',
    padding: 0,
    color: 'var(--color-foreground-de-emp)',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    fontSize: 'inherit',
    fontFamily: 'inherit',
    '&:hover': {
        color: 'var(--color-foreground)'
    },
    '&:focus-visible': {
        outline: `${apollo_core.Border.BorderThickS} solid var(--color-focus-indicator)`
    }
});
const KeyValuePair = styled('div')({
    display: 'flex',
    marginBottom: apollo_core.Spacing.SpacingMicro,
    fontSize: apollo_core.FontFamily.FontSSize,
    '&:last-child': {
        marginBottom: 0
    }
});
const Key = styled('span')({
    fontWeight: apollo_core.FontFamily.FontWeightMedium,
    marginBottom: apollo_core.Spacing.SpacingXs,
    marginRight: apollo_core.Spacing.SpacingXs,
    minWidth: 'max-content'
});
const NestedValue = ({ value, depth = 0 })=>{
    const [isExpanded, setIsExpanded] = useState(false);
    if (null === value) return /*#__PURE__*/ jsx(Value, {
        children: "null"
    });
    if ('object' != typeof value) return /*#__PURE__*/ jsx(Value, {
        children: String(value)
    });
    if (Array.isArray(value)) {
        if (0 === value.length) return /*#__PURE__*/ jsx(Value, {
            children: "[]"
        });
        return /*#__PURE__*/ jsxs(Value, {
            children: [
                /*#__PURE__*/ jsxs(ExpandButton, {
                    onClick: ()=>setIsExpanded(!isExpanded),
                    children: [
                        /*#__PURE__*/ jsx(SectionArrowIcon, {
                            fontSize: "small",
                            expanded: isExpanded
                        }),
                        "Array[",
                        value.length,
                        "]"
                    ]
                }),
                isExpanded && /*#__PURE__*/ jsx(NestedObjectContainer, {
                    children: value.map((item, index)=>/*#__PURE__*/ jsxs(KeyValuePair, {
                            children: [
                                /*#__PURE__*/ jsxs(Key, {
                                    children: [
                                        "[",
                                        index,
                                        "]:"
                                    ]
                                }),
                                /*#__PURE__*/ jsx(NestedValue, {
                                    value: item,
                                    depth: depth + 1
                                })
                            ]
                        }, index))
                })
            ]
        });
    }
    const entries = Object.entries(value);
    if (0 === entries.length) return /*#__PURE__*/ jsx(Value, {
        children: '{}'
    });
    return /*#__PURE__*/ jsxs(Value, {
        children: [
            /*#__PURE__*/ jsxs(ExpandButton, {
                onClick: ()=>setIsExpanded(!isExpanded),
                children: [
                    /*#__PURE__*/ jsx(SectionArrowIcon, {
                        fontSize: "small",
                        expanded: isExpanded
                    }),
                    '{...}'
                ]
            }),
            isExpanded && /*#__PURE__*/ jsx(NestedObjectContainer, {
                children: entries.map(([key, val])=>/*#__PURE__*/ jsxs(KeyValuePair, {
                        children: [
                            /*#__PURE__*/ jsxs(Key, {
                                children: [
                                    key,
                                    ":"
                                ]
                            }),
                            /*#__PURE__*/ jsx(NestedValue, {
                                value: val,
                                depth: depth + 1
                            })
                        ]
                    }, key))
            })
        ]
    });
};
export { NestedValue };
