import { jsx as r, jsxs as s, Fragment as N } from "react/jsx-runtime";
import { useMemo as j, useState as m, useEffect as v, useCallback as S } from "react";
import { ChevronDown as L, ChevronRight as $ } from "lucide-react";
import { u as w, a as C, h as O } from "./index-Bk6WqXgW.mjs";
const E = {
  key: "#9cdcfe",
  string: "#ce9178",
  number: "#b5cea8",
  keyword: "#569cd6",
  bracket: "#d4d4d4",
  colon: "rgb(255 255 255 / 0.6)",
  collapsed: "rgb(255 255 255 / 0.4)",
  arrow: "rgb(255 255 255 / 0.5)"
}, R = {
  key: "#005cc5",
  string: "#032f62",
  number: "#005cc5",
  keyword: "#d73a49",
  bracket: "#24292e",
  colon: "rgb(23 23 23 / 0.6)",
  collapsed: "rgb(23 23 23 / 0.45)",
  arrow: "rgb(23 23 23 / 0.55)"
}, b = ({ keyName: e, value: n, depth: l, defaultExpanded: y, colors: t }) => {
  const i = w(), [c, a] = m(y), f = l * 20, d = S(() => a((o) => !o), []);
  if (n == null || typeof n != "object")
    return /* @__PURE__ */ s("div", { className: "rfp-flex rfp-items-start rfp-py-px rfp-font-mono rfp-text-sm", style: { paddingLeft: `${f}px` }, children: [
      /* @__PURE__ */ r("span", { className: "rfp-w-4 rfp-h-5 rfp-flex-shrink-0" }),
      e !== void 0 && /* @__PURE__ */ s("span", { className: "rfp-flex-shrink-0", style: { color: t.key }, children: [
        '"',
        e,
        '"',
        /* @__PURE__ */ r("span", { style: { color: t.colon }, children: ": " })
      ] }),
      J(n, t)
    ] });
  const p = Array.isArray(n), u = (p ? n : Object.entries(n)).length, k = p ? "[" : "{", x = p ? "]" : "}";
  return u === 0 ? /* @__PURE__ */ s("div", { className: "rfp-flex rfp-items-start rfp-py-px rfp-font-mono rfp-text-sm", style: { paddingLeft: `${f}px` }, children: [
    /* @__PURE__ */ r("span", { className: "rfp-w-4 rfp-h-5 rfp-flex-shrink-0" }),
    e !== void 0 && /* @__PURE__ */ s("span", { className: "rfp-flex-shrink-0", style: { color: t.key }, children: [
      '"',
      e,
      '"',
      /* @__PURE__ */ r("span", { style: { color: t.colon }, children: ": " })
    ] }),
    /* @__PURE__ */ s("span", { style: { color: t.bracket }, children: [
      k,
      x
    ] })
  ] }) : /* @__PURE__ */ s("div", { children: [
    /* @__PURE__ */ s(
      "div",
      {
        className: "rfp-flex rfp-items-start rfp-py-px rfp-font-mono rfp-text-sm rfp-cursor-pointer hover:rfp-bg-surface-1 rfp-select-none",
        style: { paddingLeft: `${f}px` },
        onClick: d,
        children: [
          /* @__PURE__ */ r("span", { className: "rfp-w-4 rfp-h-5 rfp-flex-shrink-0 rfp-flex rfp-items-center rfp-justify-center", style: { color: t.arrow }, children: c ? /* @__PURE__ */ r(L, { className: "rfp-w-3.5 rfp-h-3.5" }) : /* @__PURE__ */ r($, { className: "rfp-w-3.5 rfp-h-3.5" }) }),
          e !== void 0 && /* @__PURE__ */ s("span", { className: "rfp-flex-shrink-0", style: { color: t.key }, children: [
            '"',
            e,
            '"',
            /* @__PURE__ */ r("span", { style: { color: t.colon }, children: ": " })
          ] }),
          /* @__PURE__ */ r("span", { style: { color: t.bracket }, children: k }),
          !c && /* @__PURE__ */ s("span", { className: "rfp-ml-1", style: { color: t.collapsed }, children: [
            p ? `${u} ${i("json.items")}` : `${u} ${i("json.keys")}`,
            /* @__PURE__ */ s("span", { style: { color: t.bracket }, children: [
              " ",
              x
            ] })
          ] })
        ]
      }
    ),
    c && /* @__PURE__ */ s(N, { children: [
      p ? n.map((o, g) => /* @__PURE__ */ r(b, { value: o, depth: l + 1, defaultExpanded: l < 1, colors: t }, g)) : Object.entries(n).map(([o, g]) => /* @__PURE__ */ r(b, { keyName: o, value: g, depth: l + 1, defaultExpanded: l < 1, colors: t }, o)),
      /* @__PURE__ */ r("div", { className: "rfp-font-mono rfp-text-sm rfp-py-px", style: { paddingLeft: `${f + 20}px`, color: t.bracket }, children: x })
    ] })
  ] });
};
function J(e, n) {
  return e === null ? /* @__PURE__ */ r("span", { style: { color: n.keyword, fontStyle: "italic" }, children: "null" }) : e === void 0 ? /* @__PURE__ */ r("span", { style: { color: n.keyword, fontStyle: "italic" }, children: "undefined" }) : typeof e == "boolean" ? /* @__PURE__ */ r("span", { style: { color: n.keyword }, children: String(e) }) : typeof e == "number" ? /* @__PURE__ */ r("span", { style: { color: n.number }, children: String(e) }) : typeof e == "string" ? /* @__PURE__ */ s("span", { style: { color: n.string }, children: [
    '"',
    e,
    '"'
  ] }) : /* @__PURE__ */ r("span", { style: { color: n.bracket }, children: String(e) });
}
function A(e) {
  return e === "light" ? R : E;
}
const F = ({ url: e }) => {
  const n = w(), l = C(), y = j(() => A(l), [l]), [t, i] = m(null), [c, a] = m(!0), [f, d] = m(null);
  return v(() => {
    (async () => {
      try {
        a(!0), d(null);
        const h = await O(e);
        i(JSON.parse(h));
      } catch (h) {
        d(n("json.load_failed")), console.error(h);
      } finally {
        a(!1);
      }
    })();
  }, [e]), c ? /* @__PURE__ */ r("div", { className: "rfp-flex rfp-items-center rfp-justify-center rfp-w-full rfp-h-full", children: /* @__PURE__ */ r("div", { className: "rfp-w-12 rfp-h-12 rfp-border-4 rfp-border-line-strong rfp-border-t-spinner-head rfp-rounded-full rfp-animate-spin" }) }) : f ? /* @__PURE__ */ r("div", { className: "rfp-flex rfp-items-center rfp-justify-center rfp-w-full rfp-h-full", children: /* @__PURE__ */ r("div", { className: "rfp-text-fg-secondary rfp-text-center", children: /* @__PURE__ */ r("p", { className: "rfp-text-lg", children: f }) }) }) : /* @__PURE__ */ r("div", { className: "rfp-w-full rfp-h-full rfp-overflow-auto rfp-bg-code-bg rfp-py-3 rfp-pr-4", children: /* @__PURE__ */ r(b, { value: t, depth: 0, defaultExpanded: !0, colors: y }) });
};
export {
  F as JsonRenderer
};
//# sourceMappingURL=index-BeXx86As.mjs.map
