import { j as jsxRuntimeExports, d as c, s, x as l, y as l$1, z as m, A as o, B as i, C as m$1, o as a, h as m$2, r as reactExports, c as a$1, w as h, k as c$1, l as i$1, m as m$3, e as gql, p as s$1, q as c$2, u, t as n, v as i$2 } from "./index-Cr4zbAtA.js";
import { M as Metadata } from "./Metadata-aK5zM6ek.js";
import { c as createCell } from "./createCell-D7cbP3PP.js";
import { D as Dagre, F as ForwardRef, B as Background$1, a as BackgroundVariant, C as Controls$1 } from "./index-x4KEE2o6.js";
import { H as Handle$1, P as Position, R as ReactFlowProvider, u as useReactFlow, a as useNodesState, b as useEdgesState, c as ReactFlow, d as Panel } from "./index-DFcimn70.js";
import { F as ForwardRef$1 } from "./ArrowsRightLeftIcon-BIf68FuZ.js";
const GraphQLRelationshipsTable = ({
  relationships
}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(c, { children: [
  /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: "Relationships" }),
  /* @__PURE__ */ jsxRuntimeExports.jsxs(l, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(l$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(o, { children: "Relationship" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(o, { children: "From" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(o, { children: "To" })
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(i, { children: relationships.map((relationship, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(a, { children: relationship.label }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(m$2, { children: relationship.source }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(m$2, { children: relationship.target }) })
    ] }, `${relationship.source}-${relationship.source}-${relationship.label}=${index}`)) })
  ] })
] });
const getNodeCharacteristics = (definition) => {
  const name = definition.name.value || "Unknown";
  const kind = definition.kind;
  const color = getNodeColorForKind(kind, name);
  const emoji = getNodeEmojiForKind(kind, name);
  const numFields = definition.fields ? definition.fields.length : 0;
  return {
    name,
    kind,
    color,
    emoji,
    numFields
  };
};
const getNodeColorForKind = (kind, name) => {
  switch (kind) {
    case "DirectiveDefinition":
      if (name === "skipAuth" || name === "requireAuth") {
        return "red";
      }
      return "fuchsia";
    case "EnumTypeDefinition":
      return "yellow";
    case "InputObjectTypeDefinition":
      return "green";
    case "InterfaceTypeDefinition":
      return "blue";
    case "ObjectTypeDefinition":
      if (name === "Query") {
        return "teal";
      }
      if (name === "Mutation") {
        return "cyan";
      }
      return "indigo";
    case "ScalarTypeDefinition":
      return "purple";
    case "UnionTypeDefinition":
      return "pink";
    case "SchemaDefinition":
      return "cyan";
    case "OperationDefinition":
      return "orange";
    case "FragmentDefinition":
      return "brown";
    case "FieldDefinition":
      return "teal";
    case "EnumValueDefinition":
      return "lime";
    case "InputValueDefinition":
      return "amber";
    case "VariableDefinition":
      return "pink";
    default:
      return "gray";
  }
};
const getNodeEmojiForKind = (kind, name) => {
  switch (kind) {
    case "DirectiveDefinition":
      if (name === "skipAuth" || name === "requireAuth") {
        return "🔒";
      }
      return "🛑";
    case "EnumTypeDefinition":
      return "🔠";
    case "InputObjectTypeDefinition":
      return "📥";
    case "InterfaceTypeDefinition":
      return "🔄";
    case "ObjectTypeDefinition":
      if (name === "Query") {
        return "🔍";
      }
      if (name === "Mutation") {
        return "🧬";
      }
      return "📦";
    case "ScalarTypeDefinition":
      return "📊";
    case "UnionTypeDefinition":
      return "🔗";
    case "SchemaDefinition":
      return "📜";
    case "OperationDefinition":
      return "🩺";
    case "FragmentDefinition":
      return "🧩";
    case "FieldDefinition":
      return "🔗";
    case "EnumValueDefinition":
      return "🆚";
    case "InputValueDefinition":
      return "🔢";
    case "VariableDefinition":
      return "🔄";
    default:
      return "🔘";
  }
};
const GraphQLSchemaDefinitionNode = ({
  data
}) => {
  const {
    name,
    color,
    emoji,
    numFields
  } = getNodeCharacteristics(data.definition);
  const textColor = `text-${color}-500`;
  const borderColor = `border-${color}-700`;
  const bgColor = `bg-${color}-100`;
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${borderColor} min-w-32 max-w-64 max-h-32 rounded-md border-2 border-r-2 border-stone-400 bg-white px-4 py-2 shadow-md`, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(Handle$1, { type: "target", position: Position.Top }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(Handle$1, { type: "source", position: Position.Bottom }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex h-12 w-12 items-center justify-center rounded-full ${bgColor}`, children: emoji }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ml-2", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-lg font-bold ${textColor}`, children: name }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `text-sm ${textColor}`, children: [
          numFields,
          " fields"
        ] })
      ] })
    ] })
  ] });
};
const GraphQLSchemaDefinitionNode$1 = reactExports.memo(GraphQLSchemaDefinitionNode);
function getNodeTypes(definitions) {
  const nodeTypes = {};
  const definitionTypes = Array.from(new Set(definitions.map((definition) => definition.kind)));
  definitionTypes.forEach((kind) => {
    nodeTypes[`${kind}Node`] = GraphQLSchemaDefinitionNode$1;
  });
  return nodeTypes;
}
function getNodes(definitions) {
  var _a;
  const nodes = [];
  let xOffSet = 0;
  let yOffSet = 0;
  for (let i2 = 0; i2 < definitions.length; i2++) {
    const definition = definitions[i2];
    const kind = definition.kind;
    const name = ((_a = definition.name) == null ? void 0 : _a.value) || "unknown-name";
    const id = name;
    if (kind === "ObjectTypeDefinition" && name !== "Redwood") {
      const node = {
        id,
        type: `${kind}Node`,
        data: {
          definition: definitions[i2]
        },
        position: {
          x: xOffSet,
          y: yOffSet
        },
        deletable: false,
        draggable: true
      };
      nodes.push(node);
      xOffSet += 300;
      if (xOffSet > 300 * 3) {
        xOffSet = 0;
        yOffSet += 128;
      }
      yOffSet += i2 % 2 === 0 ? 32 : -32;
    }
  }
  return nodes;
}
function getEdges(relationships) {
  const edges = [];
  relationships == null ? void 0 : relationships.forEach((relationship) => {
    edges.push({
      id: `e-${relationship.source}-${relationship.target}`,
      source: relationship.source,
      target: relationship.target,
      label: relationship.label || "connect",
      animated: true
    });
  });
  return edges;
}
const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
const getLaidOutElements = (nodes, edges, options) => {
  g.setGraph({
    rankdir: options.direction
  });
  edges.forEach((edge) => g.setEdge(edge.source, edge.target));
  nodes.forEach((node) => g.setNode(node.id, node));
  Dagre.layout(g);
  return {
    nodes: nodes.map((node) => {
      const {
        x,
        y
      } = g.node(node.id);
      return {
        ...node,
        position: {
          x,
          y
        }
      };
    }),
    edges
  };
};
const LayoutFlow = ({
  schema
}) => {
  const {
    fitView
  } = useReactFlow();
  const definitions = JSON.parse(schema.definitions);
  const nodeTypes = getNodeTypes(definitions);
  const initialNodes = getNodes(definitions);
  const initialEdges = getEdges(schema.relationships);
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const onLayout = reactExports.useCallback((direction) => {
    const laidOut = getLaidOutElements(nodes, edges, {
      direction
    });
    setNodes([...laidOut.nodes]);
    setEdges([...laidOut.edges]);
    window.requestAnimationFrame(() => {
      fitView();
    });
  }, [nodes, edges, fitView, setNodes, setEdges]);
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-[640px] w-full min-w-[320px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ReactFlow, { className: "bg-zinc-50", nodes, edges, nodeTypes, onNodesChange, onEdgesChange, nodesDraggable: true, fitView: true, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(Panel, { position: "top-right", onLoad: () => onLayout("TB"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(a$1, { flexDirection: "row", alignItems: "center", justifyContent: "evenly", className: "space-x-4", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(h, { icon: ForwardRef, onClick: () => onLayout("TB") }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(h, { icon: ForwardRef$1, onClick: () => onLayout("LR") })
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(Background$1, { variant: BackgroundVariant.Dots }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(Controls$1, { className: "bg-white", showInteractive: false })
  ] }) });
};
const GraphQLSchemaDiagram = ({
  schema
}) => {
  return /* @__PURE__ */ jsxRuntimeExports.jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(LayoutFlow, { schema }) });
};
const GraphQLSchemaTables = ({
  schema
}) => {
  const definitions = JSON.parse(schema.definitions);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(c$1, { numItems: 2, className: "gap-4", children: definitions.map((definition, index) => {
    var _a, _b, _c;
    const name = (_a = definition.name) == null ? void 0 : _a.value;
    const kind = definition.kind.replace("TypeDefinition", "").replace("Definition", "").replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").join(" ");
    const description = (_b = definition.description) == null ? void 0 : _b.value;
    return /* @__PURE__ */ jsxRuntimeExports.jsx(i$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(c, { className: "space-y-4", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: name }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(m$3, { children: kind }),
      description && /* @__PURE__ */ jsxRuntimeExports.jsx(m$3, { children: description }),
      definition.fields && /* @__PURE__ */ jsxRuntimeExports.jsxs(l, { className: "mt-5", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(l$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(o, {}),
          /* @__PURE__ */ jsxRuntimeExports.jsx(o, { children: "Name" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(o, { children: "Type" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(o, { children: "Required" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(o, { children: "Directives" })
        ] }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(i, { children: (_c = definition == null ? void 0 : definition.fields) == null ? void 0 : _c.map((field, index2) => {
          var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
          return /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(a, { children: index2 + 1 }) }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(a, { children: (_a2 = field.name) == null ? void 0 : _a2.value }) }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(m$2, { children: [
              ((_f = (_e = (_d = (_c2 = (_b2 = field.type) == null ? void 0 : _b2.type) == null ? void 0 : _c2.type) == null ? void 0 : _d.type) == null ? void 0 : _e.name) == null ? void 0 : _f.value) || ((_j = (_i = (_h = (_g = field.type) == null ? void 0 : _g.type) == null ? void 0 : _h.type) == null ? void 0 : _i.name) == null ? void 0 : _j.value) || ((_m = (_l = (_k = field.type) == null ? void 0 : _k.type) == null ? void 0 : _l.name) == null ? void 0 : _m.value) || ((_o = (_n = field.type) == null ? void 0 : _n.name) == null ? void 0 : _o.value),
              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: ((_q = (_p = field.type) == null ? void 0 : _p.type) == null ? void 0 : _q.kind) === "ListType" && `[]` })
            ] }) }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(m$2, { children: ((_r = field.type) == null ? void 0 : _r.kind) === "NonNullType" ? "Yes" : "No" }) }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(m$2, { className: "text-wrap", children: (_s = field.directives) == null ? void 0 : _s.map((d) => {
              var _a3;
              return (_a3 = d.name) == null ? void 0 : _a3.value;
            }).join(", ") }) })
          ] }, index2);
        }) })
      ] })
    ] }) }, `gql-table-${definition.name}-${index}`);
  }) }) });
};
const QUERY = gql`
  query FindGraphQLSchemaQuery {
    schema: graphqlSchema {
      id
      definitions
      relationships {
        source
        target
        label
      }
    }
  }
`;
const Loading = () => /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: "Loading..." });
const Empty = () => /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: "Empty" });
const Failure = ({
  error
}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(s, {
  children: [
    "Error: ",
    error == null ? void 0 : error.message
  ]
});
const Success = ({
  schema
}) => {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(s$1, {
    children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs(c$2, {
        className: "mt-8",
        children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(u, { children: "Diagram" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(u, { children: "Schema" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(u, { children: "Details" })
        ]
      }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(n, {
        children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(i$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(GraphQLSchemaDiagram, { schema }) }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(i$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(GraphQLSchemaTables, { schema }) }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(i$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(GraphQLRelationshipsTable, { relationships: schema.relationships }) })
        ]
      })
    ]
  });
};
const GraphQLSchemaCell = createCell({ QUERY, Loading, Empty, Failure, Success, displayName: "GraphQLSchemaCell" });
const GraphQLSchemaPage = () => {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(Metadata, { title: "GraphQL Schema", description: "GraphQL Schema" }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: "GraphQL Schema" }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(m$3, { children: "Your schema" }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(GraphQLSchemaCell, {})
  ] });
};
export {
  GraphQLSchemaPage as default
};
