import { jsx as _jsx } from "react/jsx-runtime";
import { JsonViewer } from "@powerhousedao/design-system/ui/components/json-viewer/json-viewer.js";
import { useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { TabContent } from "../tabs/tab-content.js";
import { Tabs } from "../tabs/tabs.js";
function formatScopeLabel(text) {
    if (!text)
        return ""; // Handle empty strings or null
    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}
export function DocumentStateViewer({ state, ignoredScopes = ["auth", "document"], defaultScope, className, }) {
    const scopes = useMemo(() => Object.keys(state).filter((scope) => !ignoredScopes.includes(scope)), [state, ignoredScopes]);
    const initialScope = defaultScope || scopes.at(0) || "global";
    if (scopes.length === 0) {
        return _jsx("div", { className: "text-sm text-gray-500", children: "No state data" });
    }
    return (_jsx(Tabs, { defaultValue: formatScopeLabel(initialScope), children: scopes.map((scope) => (_jsx(TabContent, { label: formatScopeLabel(scope), description: scope, children: _jsx("div", { className: twMerge("-mt-2 rounded-md border border-gray-300 bg-gray-50 p-3 font-mono text-sm", className), children: _jsx(JsonViewer, { data: state[scope] }) }) }, scope))) }));
}
//# sourceMappingURL=document-state-viewer.js.map