import m from "react";
import { r as T, a as r, M as $, H as w, B as x, s as z, o as S } from "./App-7cdde89e.mjs";
import { S as C } from "./chakra-ui-skeleton.esm-b78f9f1e.mjs";
import "@emotion/react";
import "react-dom";
import "@emotion/styled";
import "@feedloop/formula-editor";
import "@feedloop/expression-parser";
function I() {
  var u, E;
  const f = T(), [p, v] = m.useState("<svg></svg>"), s = m.useMemo(() => {
    var c, l, d;
    if (!((l = (c = f.data) == null ? void 0 : c.data) != null && l.tables))
      return;
    const n = (d = f.data) == null ? void 0 : d.data.tables, o = /* @__PURE__ */ new Set();
    let e = "erDiagram";
    const h = n.concat().sort((a, t) => t.name === "users" ? 0 : 1);
    let i = "";
    return h.forEach((a) => {
      e += `
${a.name} {
`, a.columns.forEach((t) => {
        if (t.references || (e += `${t.type} ${t.name}
`), t.references) {
          const b = t.name.split("_")[0], g = [a.name, t.references.targetTable].sort().concat(t.references.type || "ManyToMany").join("_");
          o.has(g) || (o.add(g), t.references.type === "OneToMany" ? i += `${a.name} }o--|| ${t.references.targetTable} : ${b}
` : i += `${a.name} }o--o{ ${t.references.targetTable} : ${b}
`);
        }
      }), e += `}
`;
    }), `${e}${i}`;
  }, [(E = (u = f.data) == null ? void 0 : u.data) == null ? void 0 : E.tables]), y = m.useCallback((n) => {
    const o = new Blob([n]), e = document.createElement("a");
    e.download = "ERD.svg", e.href = URL.createObjectURL(o), document.body.appendChild(e), e.click(), document.body.removeChild(e), URL.revokeObjectURL(e.href);
  }, []);
  return m.useEffect(() => {
    const n = setTimeout(async () => {
      if (!s)
        return;
      const {
        default: o
      } = await import("./mermaid.esm.min-ac303610.mjs"), e = await import("./index-644e2bc8.mjs");
      o.initialize({
        theme: "forest",
        // @ts-ignore
        themeCSS: `
          .entityBox {
            fill: #F6F6F6;
            stroke: #E9E9E9;
          }
          .attributeBoxOdd {
            fill: #ffffff;
            stroke: #E9E9E9;
          }
          .attributeBoxEven {
            fill: #F6F6F6;
            stroke: #E9E9E9;
          }
          .relationshipLabelBox {
            fill: #E9E9E9;
            opacity: 0.7;
          }`,
        maxTextSize: 9e4
      }), o.mermaidAPI.render("graph", s, (h) => {
        const i = h.replace(/ height="[^"]*"/, "");
        v(i), setTimeout(() => {
          const c = e.zoom().on("zoom", d), l = e.select("#erd").call(
            // @ts-ignore
            c
          );
          function d({
            transform: a
          }) {
            l.select("#graph").attr("transform", a);
          }
        }, 500);
      });
    }, 300);
    return () => clearTimeout(n);
  }, [s]), s ? /* @__PURE__ */ r($, {
    Header: /* @__PURE__ */ r(w, {
      children: /* @__PURE__ */ r(x, {
        size: "sm",
        variant: "outline",
        fontSize: "sm",
        fontWeight: "400",
        onClick: () => y(p),
        leftIcon: /* @__PURE__ */ r(z, {
          fontSize: "16px"
        }),
        children: "Download"
      })
    }),
    MainComponent: /* @__PURE__ */ r(S, {
      position: "relative",
      width: "100%",
      id: "zoom-container",
      overflow: "hidden",
      children: /* @__PURE__ */ r(S, {
        id: "erd",
        dangerouslySetInnerHTML: {
          __html: p
        }
      })
    })
  }) : /* @__PURE__ */ r(C, {});
}
export {
  I as default
};
