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

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var MIN_CELL_SIZE_FOR_VALUE = 28;
function Matrix({
  nodes,
  matrix,
  size = 480,
  labelMargin = 80,
  showValues = true,
  onCellHover,
  onCellClick,
  className,
  ...rest
}) {
  const cells = React.useMemo(() => layout(nodes, matrix, size, labelMargin), [nodes, matrix, size, labelMargin]);
  const desc = `Matrix with ${nodes.length} node${nodes.length === 1 ? "" : "s"} (${nodes.length}\xD7${nodes.length} cells)`;
  const cellSize = nodes.length > 0 ? (size - labelMargin) / nodes.length : 0;
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      ...rest,
      "data-hex-matrix": true,
      role: "img",
      width: size,
      height: size,
      viewBox: `0 0 ${size} ${size}`,
      className: cn("block", className),
      children: [
        /* @__PURE__ */ jsx("title", { children: "Adjacency matrix" }),
        /* @__PURE__ */ jsx("desc", { children: desc }),
        /* @__PURE__ */ jsx("g", { "data-hex-matrix-rows": true, children: nodes.map((n, i) => /* @__PURE__ */ jsx(
          "text",
          {
            x: labelMargin - 4,
            y: labelMargin + cellSize * i + cellSize / 2,
            dy: "0.35em",
            textAnchor: "end",
            fontSize: 10,
            fill: "hsl(var(--foreground))",
            children: n.label
          },
          `row-${n.id}`
        )) }),
        /* @__PURE__ */ jsx("g", { "data-hex-matrix-cols": true, children: nodes.map((n, i) => /* @__PURE__ */ jsx(
          "text",
          {
            x: labelMargin + cellSize * i + cellSize / 2,
            y: labelMargin - 4,
            textAnchor: "end",
            fontSize: 10,
            fill: "hsl(var(--foreground))",
            transform: `rotate(-45 ${labelMargin + cellSize * i + cellSize / 2} ${labelMargin - 4})`,
            children: n.label
          },
          `col-${n.id}`
        )) }),
        /* @__PURE__ */ jsx("g", { "data-hex-matrix-cells": true, children: cells.map((c) => {
          const interactive = Boolean(onCellHover || onCellClick);
          const cellPayload = { row: c.row, col: c.col, value: c.value };
          const fireHover = (cell) => onCellHover?.(cell);
          const handleActivate = () => onCellClick?.(cellPayload);
          return /* @__PURE__ */ jsxs(
            "g",
            {
              "data-hex-matrix-cell": true,
              "data-row": c.rowIndex,
              "data-col": c.colIndex,
              className: interactive ? "focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-ring" : void 0,
              role: interactive ? "button" : void 0,
              tabIndex: interactive ? 0 : void 0,
              "aria-label": interactive ? `${c.row.label} \u2192 ${c.col.label}: ${c.value}` : void 0,
              style: interactive ? { cursor: "pointer" } : void 0,
              onMouseEnter: onCellHover ? () => fireHover(cellPayload) : void 0,
              onMouseLeave: onCellHover ? () => fireHover(null) : void 0,
              onFocus: onCellHover ? () => fireHover(cellPayload) : void 0,
              onBlur: onCellHover ? () => fireHover(null) : void 0,
              onClick: onCellClick ? handleActivate : void 0,
              onKeyDown: onCellClick ? (e) => activateOnKey(e, handleActivate) : void 0,
              children: [
                /* @__PURE__ */ jsx(
                  "rect",
                  {
                    x: c.x,
                    y: c.y,
                    width: cellSize,
                    height: cellSize,
                    fill: "hsl(var(--chart-1, var(--primary)))",
                    fillOpacity: 0.08 + 0.87 * c.intensity,
                    stroke: "hsl(var(--background))",
                    strokeWidth: 0.5
                  }
                ),
                showValues && cellSize > MIN_CELL_SIZE_FOR_VALUE && c.value !== 0 ? /* @__PURE__ */ jsx(
                  "text",
                  {
                    x: c.x + cellSize / 2,
                    y: c.y + cellSize / 2,
                    dy: "0.35em",
                    textAnchor: "middle",
                    fontSize: 9,
                    fill: c.intensity > 0.55 ? "hsl(var(--background))" : "hsl(var(--foreground))",
                    style: { pointerEvents: "none" },
                    children: c.value
                  }
                ) : null
              ]
            },
            `${c.rowIndex}-${c.colIndex}`
          );
        }) })
      ]
    }
  );
}
function layout(nodes, matrix, size, labelMargin) {
  if (nodes.length === 0) return [];
  const cellSize = (size - labelMargin) / nodes.length;
  let maxValue = 0;
  for (const row of matrix) {
    for (const v of row) if (v > maxValue) maxValue = v;
  }
  const cells = [];
  for (let i = 0; i < nodes.length; i++) {
    for (let j = 0; j < nodes.length; j++) {
      const value = matrix[i]?.[j] ?? 0;
      cells.push({
        row: nodes[i],
        col: nodes[j],
        rowIndex: i,
        colIndex: j,
        value,
        x: labelMargin + cellSize * j,
        y: labelMargin + cellSize * i,
        intensity: maxValue > 0 ? value / maxValue : 0
      });
    }
  }
  return cells;
}
function activateOnKey(e, fn) {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    fn();
  }
}

export { Matrix };
//# sourceMappingURL=matrix.js.map
//# sourceMappingURL=matrix.js.map