import React from "react";
import { JSONTree } from "react-json-tree";
import { RicosDocumentJTD } from "./../../../ricos-schema/next-schema/index.js";
import { Button } from "../components/button.js";
import { jsonTreeTheme } from "../theme.js";
const RicosSchemaTab = () => {
  const [openedRef, setOpenedRef] = React.useState(null);
  React.useEffect(() => {
    if (!openedRef) {
      return;
    }
    const el = document.querySelector(`[data-definition="${openedRef}"]`);
    if (el) {
      el.scrollIntoView({ behavior: "smooth" });
    }
  }, [openedRef]);
  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React.createElement("p", { style: { color: "rgba(205, 214, 244, .8)" } }, "Ricos schema is defined in JSON Typedef, you can read more about it", " ", /* @__PURE__ */ React.createElement(
    "a",
    {
      target: "_blank",
      style: { color: jsonTreeTheme.base0A },
      href: "https://jsontypedef.com/docs/jtd-in-5-minutes/",
      rel: "noreferrer"
    },
    "here."
  )), /* @__PURE__ */ React.createElement(
    Button,
    {
      onClick: () => {
        console.log(RicosDocumentJTD);
      }
    },
    "Log Schema"
  )), /* @__PURE__ */ React.createElement(
    JSONTree,
    {
      collectionLimit: 0,
      labelRenderer: (path) => {
        if (path.length === 2 && path[1] === "definitions") {
          return /* @__PURE__ */ React.createElement("span", { "data-definition": path[0] }, path[0]);
        }
        return path[0];
      },
      valueRenderer: (valueAsString, value, ...nodePath) => {
        if (nodePath[0] === "ref") {
          return /* @__PURE__ */ React.createElement("span", null, valueAsString, /* @__PURE__ */ React.createElement(
            Button,
            {
              onClick: () => {
                setOpenedRef(value);
              }
            },
            "open"
          ));
        }
        return valueAsString;
      },
      data: RicosDocumentJTD,
      invertTheme: false,
      theme: jsonTreeTheme,
      hideRoot: true,
      shouldExpandNode: (path) => {
        const rev = [...path].reverse();
        if (rev.length === 1 && rev[0] === "definitions") {
          return true;
        }
        if (rev.length === 2 && rev[0] === "definitions" && openedRef && openedRef === rev[1]) {
          return true;
        }
        return false;
      }
    }
  ));
};
export {
  RicosSchemaTab
};
//# sourceMappingURL=ricos-schema.js.map
