import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DotBadge } from "@vertesia/ui/core";
import clsx from "clsx";
import { computeTitleFromName } from "../form/ManagedObject.js";
export function JSONView({ value }) {
    return _jsx("div", { className: "flex flex-col gap-4", children: Object.entries(value).map(([key, value]) => _jsx(PropertyElement, { name: key, value: value }, key)) });
}
function PropertyTitle({ name }) {
    return (_jsx("div", { className: 'text-md font-semibold', children: computeTitleFromName(name) }));
}
function BlockElement({ children, className }) {
    return (_jsx("div", { className: clsx('flex flex-col gap-4 py-2 pl-4 border-l-4 border-l-solid border-l-slate-100 dark:border-l-slate-600', className), children: children }));
}
function PropertyElement({ name, value }) {
    const info = getValueInfo(value);
    switch (info.type) {
        case ValueType.Inline:
            return (_jsxs("div", { className: 'w-full flex gap-2', children: [_jsx(PropertyTitle, { name: name + ':' }), _jsx("p", { children: info.value })] }));
        case ValueType.Paragraph:
            return (_jsxs("div", { children: [_jsx(PropertyTitle, { name: name }), _jsx("p", { children: info.value })] }));
        case ValueType.Prose:
            return (_jsxs("div", { className: "prose dark:prose-invert", children: [_jsx(PropertyTitle, { name: name }), _jsx("div", { className: 'vprose dark:prose-invert', children: info.value })] }));
        case ValueType.Array:
            return (_jsx(ArrayProperty, { name: name, value: value }));
        case ValueType.Object:
            return (_jsxs("div", { children: [_jsx(PropertyTitle, { name: name }), _jsx(BlockElement, { className: 'mt-2', children: Object.entries(value).map(([key, value]) => _jsx(PropertyElement, { name: key, value: value }, key)) })] }));
    }
}
function ArrayProperty({ name, value }) {
    const inlineLength = value.join(' ').length;
    const itemMediumLength = inlineLength / value.length;
    const isInline = (typeof value[0] === 'string') && (inlineLength < 80 || inlineLength < 400 && itemMediumLength < 32);
    const useBullet = value.length > 9;
    return isInline ? (_jsxs("div", { className: 'flex gap-2 flex-wrap', children: [name && _jsx(PropertyTitle, { name: name + ':' }), value.map((item, index) => _jsx(DotBadge, { children: String(item) }, index))] })) : (_jsxs("div", { children: [name && _jsx(PropertyTitle, { name: name }), _jsx("div", { className: 'flex flex-col gap-2', children: value.map((value, index) => _jsx(ItemProperty, { index: index, value: value, useBullet: useBullet }, index)) })] }));
}
function ItemProperty({ index, value, useBullet }) {
    const bullet = useBullet ? _jsx("span", { className: 'text-xl', children: "\u2022" }) : _jsxs("span", { children: [index + 1, "."] });
    const info = getValueInfo(value);
    let content;
    switch (info.type) {
        case ValueType.Object:
            content = _jsx(BlockElement, { children: Object.entries(value).map(([key, value]) => _jsx(PropertyElement, { name: key, value: value }, key)) });
            break;
        case ValueType.Array:
            content = _jsx(ArrayProperty, { value: value });
            break;
        case ValueType.Prose:
            content = _jsx("div", { className: "prose dark:prose-invert", children: info.value });
            break;
        default:
            content = _jsx("div", { children: info.value });
            break;
    }
    return (_jsxs("div", { className: 'flex gap-4 hover:bg-slate-50 dark:hover:bg-slate-800 py-2 pr-2 pl-4', children: [_jsx("div", { className: 'font-semibold text-gray-600 dark:text-gray-400', children: bullet }), _jsx("div", { children: content })] }));
}
var ValueType;
(function (ValueType) {
    ValueType[ValueType["Inline"] = 0] = "Inline";
    ValueType[ValueType["Paragraph"] = 1] = "Paragraph";
    ValueType[ValueType["Prose"] = 2] = "Prose";
    ValueType[ValueType["Array"] = 3] = "Array";
    ValueType[ValueType["Object"] = 4] = "Object";
})(ValueType || (ValueType = {}));
function getValueInfo(value) {
    if (value == null) {
        return {
            value: '-',
            type: ValueType.Inline
        };
    }
    if (Array.isArray(value)) {
        return {
            value,
            type: ValueType.Array
        };
    }
    const type = typeof value;
    if (type === 'string') {
        const len = value.length;
        let type;
        if (len < 80) {
            type = ValueType.Inline;
        }
        else if (len > 400) {
            type = ValueType.Prose;
        }
        else {
            type = ValueType.Paragraph;
            value = value.replace(/(?:\n\n)+/g, '\n\n');
        }
        return { type, value };
    }
    else if (type === 'number' || type === 'boolean') {
        return {
            value: String(value),
            type: ValueType.Inline
        };
    }
    else {
        return {
            value,
            type: ValueType.Object
        };
    }
}
//# sourceMappingURL=JSONView.js.map