"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function Dendrogram({
  root,
  orientation = "horizontal",
  linkShape = "step",
  width = 600,
  height = 400,
  onLeafClick,
  className,
  ...rest
}) {
  const [d3h, setD3h] = React.useState(null);
  React.useEffect(() => {
    let cancelled = false;
    void import('d3-hierarchy').then((mod) => {
      if (!cancelled) setD3h(mod);
    });
    return () => {
      cancelled = true;
    };
  }, []);
  if (!d3h) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        "data-hex-dendrogram-loading": true,
        "aria-busy": "true",
        className: cn("inline-block bg-muted/20", className),
        style: { width, height }
      }
    );
  }
  const { nodes, links } = layout(d3h, root, orientation, width, height);
  const leafCount = nodes.filter((n) => n.isLeaf).length;
  const desc = `Dendrogram with ${leafCount} leaves, rooted at "${root.label}"`;
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      ...rest,
      "data-hex-dendrogram": true,
      "data-orientation": orientation,
      "data-link-shape": linkShape,
      role: "img",
      width,
      height,
      viewBox: `0 0 ${width} ${height}`,
      className: cn("block", className),
      children: [
        /* @__PURE__ */ jsx("title", { children: "Dendrogram" }),
        /* @__PURE__ */ jsx("desc", { children: desc }),
        /* @__PURE__ */ jsx("g", { "data-hex-dendrogram-links": true, children: links.map((l) => /* @__PURE__ */ jsx(
          "path",
          {
            d: linkPath(l, orientation, linkShape),
            fill: "none",
            stroke: "hsl(var(--muted-foreground))",
            strokeOpacity: 0.8,
            strokeWidth: 1
          },
          l.id
        )) }),
        /* @__PURE__ */ jsx("g", { "data-hex-dendrogram-nodes": true, children: nodes.map((n) => /* @__PURE__ */ jsxs(
          "g",
          {
            "data-hex-dendrogram-node": true,
            "data-leaf": n.isLeaf ? "true" : "false",
            "data-depth": n.depth,
            transform: `translate(${n.x},${n.y})`,
            style: n.isLeaf && onLeafClick ? { cursor: "pointer" } : void 0,
            onClick: n.isLeaf && onLeafClick ? () => onLeafClick(n.node) : void 0,
            children: [
              /* @__PURE__ */ jsx(
                "circle",
                {
                  r: n.isLeaf ? 3 : 2,
                  fill: n.isLeaf ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))"
                }
              ),
              n.isLeaf ? /* @__PURE__ */ jsx(
                "text",
                {
                  x: orientation === "horizontal" ? 6 : 0,
                  y: orientation === "horizontal" ? 4 : 14,
                  textAnchor: orientation === "horizontal" ? "start" : "middle",
                  fontSize: 11,
                  fill: "hsl(var(--foreground))",
                  style: { paintOrder: "stroke" },
                  stroke: "hsl(var(--background))",
                  strokeWidth: 3,
                  strokeLinejoin: "round",
                  children: n.node.label
                }
              ) : null
            ]
          },
          n.node.id
        )) })
      ]
    }
  );
}
function layout(d3h, root, orientation, width, height) {
  const hierarchy = d3h.hierarchy(root);
  const clusterFn = d3h.cluster();
  if (orientation === "horizontal") {
    clusterFn.size([height - 32, width - 120]);
  } else {
    clusterFn.size([width - 32, height - 64]);
  }
  const layoutRoot = clusterFn(hierarchy);
  const nodes = [];
  layoutRoot.each((d) => {
    const isLeaf = !d.children || d.children.length === 0;
    if (orientation === "horizontal") {
      nodes.push({ node: d.data, x: d.y + 16, y: d.x + 16, depth: d.depth, isLeaf });
    } else {
      nodes.push({ node: d.data, x: d.x + 16, y: d.y + 16, depth: d.depth, isLeaf });
    }
  });
  const links = layoutRoot.links().map((link, i) => {
    if (orientation === "horizontal") {
      return {
        source: { x: link.source.y + 16, y: link.source.x + 16 },
        target: { x: link.target.y + 16, y: link.target.x + 16 },
        id: `l-${i}`
      };
    }
    return {
      source: { x: link.source.x + 16, y: link.source.y + 16 },
      target: { x: link.target.x + 16, y: link.target.y + 16 },
      id: `l-${i}`
    };
  });
  return { nodes, links };
}
function linkPath(link, orientation, linkShape) {
  const { source: s, target: t } = link;
  if (linkShape === "step") {
    if (orientation === "horizontal") {
      return `M${s.x},${s.y} H${t.x} V${t.y}`;
    }
    return `M${s.x},${s.y} V${t.y} H${t.x}`;
  }
  if (orientation === "horizontal") {
    const mx = (s.x + t.x) / 2;
    return `M${s.x},${s.y} C${mx},${s.y} ${mx},${t.y} ${t.x},${t.y}`;
  }
  const my = (s.y + t.y) / 2;
  return `M${s.x},${s.y} C${s.x},${my} ${t.x},${my} ${t.x},${t.y}`;
}

export { Dendrogram };
//# sourceMappingURL=dendrogram.js.map
//# sourceMappingURL=dendrogram.js.map