//
// Copyright 2023 DXOS.org
//
import React, { useState } from 'react';
import { mx } from '@dxos/ui-theme';
export const Tree = ({ data }) => {
    return (React.createElement("div", { className: 'flex is-full plb-2 overflow-auto' },
        React.createElement(Node, { data: data, root: true })));
};
export const Node = ({ data }) => {
    if (typeof data !== 'object' || data === undefined || data === null) {
        return React.createElement(Scalar, { value: data });
    }
    if (Array.isArray(data)) {
        return (React.createElement("div", { className: 'flex flex-col space-y-2' }, data.map((value, index) => (React.createElement(KeyValue, { key: index, label: String(index), data: value, className: 'text-description font-thin' })))));
    }
    return (React.createElement("div", { className: 'flex flex-col space-y-2' }, Object.entries(data).map(([key, value]) => (React.createElement(KeyValue, { key: key, label: key, data: value, className: 'bg-groupSurface text-description font-thin' })))));
};
export const KeyValue = ({ label, data, className }) => {
    const [open, setOpen] = useState(true);
    if (data === undefined) {
        return null;
    }
    return (React.createElement("div", { className: 'flex' },
        React.createElement(Box, { className: mx('bg-inputSurface text-sm select-none cursor-pointer', className), onClick: () => setOpen((open) => !open) }, label),
        open && React.createElement(Node, { data: data })));
};
const Scalar = ({ value }) => {
    return (React.createElement(Box, { className: 'bg-skySurface text-information rounded-r-sm text-sm font-thin' }, (value === undefined && 'undefined') ||
        (value === null && 'null') ||
        (typeof value === 'string' && value) ||
        JSON.stringify(value)));
};
const Box = ({ children, className, ...props }) => {
    return (React.createElement("div", { className: mx('flex pli-2 font-mono truncate', className), ...props }, children));
};
//# sourceMappingURL=Tree.js.map