import React, { useState } from 'react';
import { PrimitiveInspector } from './PrimitiveInspector.js';
/*
 * Values that are expanded by default:
 * - primitives
 * - objects with 0 or 1 or 2 keys
 * - arrays with 0 or 1 elements
 */
function shouldExpandByDefault(value) {
    if (Array.isArray(value)) {
        return value.length <= 1;
    }
    if (value != null && typeof value === 'object') {
        return Object.keys(value).length <= 2;
    }
    return true;
}
function NotPrimitiveInspector({ value }) {
    const [expand, setExpand] = useState(shouldExpandByDefault(value));
    return (React.createElement(React.Fragment, null,
        expand ? (React.createElement("button", { type: "button", onClick: () => setExpand(false) }, "Collapse")) : (React.createElement("button", { type: "button", onClick: () => setExpand(true) }, "Expand")),
        expand ? (React.createElement("pre", null,
            React.createElement("code", null, JSON.stringify(value, null, 2)))) : (React.createElement("code", null, typeof value))));
}
export function ValueInspector({ value }) {
    if (value == null ||
        typeof value === 'string' ||
        typeof value === 'number' ||
        typeof value === 'boolean') {
        return React.createElement(PrimitiveInspector, { value: value });
    }
    return React.createElement(NotPrimitiveInspector, { value: value });
}
export function ObjectInspector({ obj }) {
    if (obj == null) {
        return React.createElement("code", null, JSON.stringify(obj));
    }
    const keys = Object.keys(obj);
    return (React.createElement("div", null, keys.map((key) => (React.createElement("div", { key: key },
        React.createElement("strong", null, key),
        ": ",
        React.createElement(ValueInspector, { value: obj[key] }))))));
}
