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