"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const designSystem = require("@choiceform/design-system");
const mermaid_core = require("../../../../../_vendor/mermaid/dist-mermaid.core.cjs");
const React = require("react");
const surveyToMermaid = require("../../../../../utils/survey-to-mermaid.cjs");
const tv = require("./tv.cjs");
const refreshCw = require("../../../../../_vendor/lucide-react/dist-esm-icons-refresh-cw.cjs");
const copy = require("../../../../../_vendor/lucide-react/dist-esm-icons-copy.cjs");
const download = require("../../../../../_vendor/lucide-react/dist-esm-icons-download.cjs");
const MessageMermaidDiagram = React.forwardRef(
  function MessageMermaidDiagram2({
    survey,
    title = "Generated Mermaid Diagram",
    showCode = false,
    className,
    mermaidConfig = {
      theme: "default",
      themeVariables: {
        darkMode: false
      }
    },
    ...props
  }, ref) {
    const mermaidRef = React.useRef(null);
    const [mermaidCode, setMermaidCode] = React.useState("");
    const [isLoading, setIsLoading] = React.useState(true);
    const [error, setError] = React.useState(null);
    const [showCodeView, setShowCodeView] = React.useState(showCode);
    const styles = tv.MessageMermaidDiagramTv();
    React.useEffect(() => {
      mermaid_core.default.initialize({
        startOnLoad: true,
        ...mermaidConfig
      });
    }, [mermaidConfig]);
    React.useEffect(() => {
      const renderDiagram = async () => {
        if (!mermaidRef.current) return;
        try {
          setIsLoading(true);
          setError(null);
          const code = surveyToMermaid.surveyToMermaid(survey);
          setMermaidCode(code);
          mermaidRef.current.innerHTML = "";
          const id = `mermaid-${Date.now()}`;
          const { svg } = await mermaid_core.default.render(id, code);
          mermaidRef.current.innerHTML = svg;
        } catch (err) {
          console.error("Mermaid rendering error:", err);
          setError(err instanceof Error ? err.message : "Failed to render diagram");
        } finally {
          setIsLoading(false);
        }
      };
      renderDiagram();
    }, [survey]);
    const handleCopy = async () => {
      try {
        await navigator.clipboard.writeText(mermaidCode);
      } catch (err) {
        console.error("Failed to copy:", err);
      }
    };
    const handleDownload = () => {
      const blob = new Blob([mermaidCode], { type: "text/plain" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `survey-${survey.id}.mmd`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    };
    const handleRefresh = () => {
      const renderDiagram = async () => {
        if (!mermaidRef.current) return;
        try {
          setIsLoading(true);
          const code = surveyToMermaid.surveyToMermaid(survey);
          mermaidRef.current.innerHTML = "";
          const id = `mermaid-${Date.now()}`;
          const { svg } = await mermaid_core.default.render(id, code);
          mermaidRef.current.innerHTML = svg;
        } catch (err) {
          console.error("Mermaid rendering error:", err);
        } finally {
          setIsLoading(false);
        }
      };
      renderDiagram();
    };
    return /* @__PURE__ */ jsxRuntime.jsxs(
      "div",
      {
        ref,
        className: designSystem.tcx(styles.root(), className),
        ...props,
        children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.header(), children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: styles.title(), children: title }) }),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container(), children: [
            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.toolbar(), children: [
              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.toolbarLeft(), children: [
                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label(), children: "Mermaid" }),
                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.sublabel(), children: "flowchart" })
              ] }),
              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.toolbarRight(), children: [
                /* @__PURE__ */ jsxRuntime.jsx(
                  "button",
                  {
                    type: "button",
                    onClick: () => setShowCodeView(!showCodeView),
                    className: styles.button(),
                    title: showCodeView ? "Show diagram" : "Show code",
                    children: /* @__PURE__ */ jsxRuntime.jsx(
                      "svg",
                      {
                        className: "h-4 w-4",
                        viewBox: "0 0 24 24",
                        fill: "none",
                        stroke: "currentColor",
                        children: /* @__PURE__ */ jsxRuntime.jsx(
                          "path",
                          {
                            d: "M16 18l6-6-6-6M8 6l-6 6 6 6",
                            strokeWidth: "2",
                            strokeLinecap: "round",
                            strokeLinejoin: "round"
                          }
                        )
                      }
                    )
                  }
                ),
                /* @__PURE__ */ jsxRuntime.jsx(
                  "button",
                  {
                    type: "button",
                    onClick: handleRefresh,
                    className: styles.button(),
                    title: "Refresh",
                    disabled: isLoading,
                    children: /* @__PURE__ */ jsxRuntime.jsx(refreshCw.default, { className: designSystem.tcx("h-4 w-4", isLoading && "animate-spin") })
                  }
                ),
                /* @__PURE__ */ jsxRuntime.jsx(
                  "button",
                  {
                    type: "button",
                    onClick: handleCopy,
                    className: styles.button(),
                    title: "Copy code",
                    children: /* @__PURE__ */ jsxRuntime.jsx(copy.default, { className: "h-4 w-4" })
                  }
                ),
                /* @__PURE__ */ jsxRuntime.jsx(
                  "button",
                  {
                    type: "button",
                    onClick: handleDownload,
                    className: styles.button(),
                    title: "Download",
                    children: /* @__PURE__ */ jsxRuntime.jsx(download.default, { className: "h-4 w-4" })
                  }
                )
              ] })
            ] }),
            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.content(), children: error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.error(), children: [
              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-strong", children: "Error rendering diagram" }),
              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-small mt-1", children: error })
            ] }) : showCodeView ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: styles.code(), children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: mermaidCode }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
              /* @__PURE__ */ jsxRuntime.jsx(
                "div",
                {
                  ref: mermaidRef,
                  className: styles.diagram()
                }
              ),
              isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.loading(), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" }) })
            ] }) })
          ] })
        ]
      }
    );
  }
);
exports.MessageMermaidDiagram = MessageMermaidDiagram;
//# sourceMappingURL=message-mermaid-diagram.cjs.map
