import { jsxs as y, jsx as n } from "react/jsx-runtime";
import C from "../../node_modules/.pnpm/mermaid@11.12.2/node_modules/mermaid/dist/mermaid.core.js";
import { useState as l, useRef as D, useId as F, useEffect as c } from "react";
import { Classes as x } from "../../constants/selectors.js";
import { useIsDarkTheme as H } from "../../hooks/use-is-dark-theme.js";
import { cn as I } from "../../utils/cn.js";
import { makeMarkerIdsUnique as L } from "../../utils/make-marker-ids-unique.js";
import { usePanZoom as Z } from "./use-pan-zoom.js";
import { ZoomControls as q } from "./zoom-controls.js";
const j = 120, A = 800, V = ({
  chart: u,
  className: f,
  ariaLabel: T = "Mermaid diagram",
  placement: k = "bottom-right",
  actions: o
}) => {
  const [O, p] = l(""), [g, a] = l(null), [_, w] = l(!1), h = D(null), v = F(), { isDarkTheme: b } = H(), { style: E, zoomIn: M, zoomOut: R, reset: s, pan: S, panStep: N } = Z();
  return c(() => {
    s(), a(null);
  }, [s]), c(() => {
    let t = !1;
    return (async () => {
      const m = {
        startOnLoad: !1,
        fontFamily: "inherit",
        theme: b ? "dark" : "default",
        gantt: {
          useWidth: A
        }
      }, e = document.createElement("div");
      e.style.position = "absolute", e.style.left = "-9999px", e.style.top = "-9999px", document.body.appendChild(e);
      try {
        C.initialize(m);
        const r = `mermaid-${v.replace(/:/g, "")}-${Date.now()}`, { svg: d } = await C.render(r, u, e);
        if (!t) {
          const z = L(d, r);
          p(z), a(null);
        }
      } catch (r) {
        if (console.error("Error while rendering mermaid", r), !t) {
          const d = r instanceof Error ? r.message : "Failed to render diagram";
          a(d), p("");
        }
      } finally {
        document.body.removeChild(e);
      }
    })().catch(console.error), () => {
      t = !0;
    };
  }, [u, v, b]), c(() => {
    if (o !== void 0)
      return;
    const t = h.current;
    if (!t)
      return;
    const i = new ResizeObserver((m) => {
      for (const e of m) {
        const r = e.contentRect.height;
        w(r >= j);
      }
    });
    return i.observe(t), () => {
      i.disconnect();
    };
  }, [o]), g ? /* @__PURE__ */ y(
    "div",
    {
      className: I(
        x.Mermaid,
        "rounded-md border border-red-200 bg-red-50 p-4 text-red-700 text-sm dark:border-red-900/50 dark:bg-red-950/50 dark:text-red-400",
        f
      ),
      "data-component-part": "mermaid-error",
      role: "alert",
      children: [
        /* @__PURE__ */ n("p", { className: "font-medium", "data-component-part": "mermaid-error-title", children: "Failed to render diagram" }),
        /* @__PURE__ */ n("p", { className: "mt-1 text-xs", "data-component-part": "mermaid-error-message", children: g })
      ]
    }
  ) : /* @__PURE__ */ y(
    "div",
    {
      className: I(
        x.Mermaid,
        "group relative overflow-hidden",
        f
      ),
      children: [
        (o === !0 || o === void 0 && _) && /* @__PURE__ */ n(
          q,
          {
            onPan: S,
            onReset: s,
            onZoomIn: M,
            onZoomOut: R,
            panStep: N,
            placement: k
          }
        ),
        /* @__PURE__ */ n(
          "div",
          {
            "aria-label": T,
            dangerouslySetInnerHTML: { __html: O },
            "data-component-part": "mermaid-diagram",
            ref: h,
            role: "img",
            style: E
          }
        )
      ]
    }
  );
};
export {
  V as Mermaid
};
