SingleTestCase.tsx

import { useEffect, useRef, useState } from "react";
import { MermaidDiagram } from "./MermaidDiagram";
import { ExcalidrawSvgPreview } from "./ExcalidrawSvgPreview";

export interface TestCase {
  type: "class" | "erd" | "flowchart" | "sequence" | "state" | "unsupported";
  name: string;
  definition: string;
}

export interface SingleTestCaseProps {
  testcase: TestCase;
  onChange: (definition: string) => void;
  onInsertMermaidSvg: (svgHtml: string, width: number, height: number) => void;
  index: number;
  activeTestcaseIndex?: number;
}

type CopyState = "idle" | "copied" | "error";

const copyToClipboard = async (text: string) => {
  if (navigator.clipboard?.writeText) {
    await navigator.clipboard.writeText(text);
    return;
  }

  const textarea = document.createElement("textarea");
  textarea.value = text;
  textarea.setAttribute("readonly", "");
  textarea.style.position = "fixed";
  textarea.style.opacity = "0";
  document.body.appendChild(textarea);
  textarea.select();

  const didCopy = document.execCommand("copy");
  textarea.remove();

  if (!didCopy) {
    throw new Error("Clipboard copy failed");
  }
};

const SingleTestCase = ({
  testcase,
  onChange,
  onInsertMermaidSvg,
  index,
}: SingleTestCaseProps) => {
  const { name, definition, type } = testcase;
  const [editableDefinition, setEditableDefinition] = useState(definition);
  const [copyState, setCopyState] = useState<CopyState>("idle");
  const resetCopyStateTimeoutRef = useRef<number | null>(null);
  const mermaidSvgRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setEditableDefinition(definition);
  }, [definition]);

  useEffect(() => {
    return () => {
      if (resetCopyStateTimeoutRef.current !== null) {
        window.clearTimeout(resetCopyStateTimeoutRef.current);
      }
    };
  }, []);

  const copyButtonLabel =
    copyState === "copied"
      ? "Copied"
      : copyState === "error"
      ? "Retry"
      : "Copy";

  return (
    <article className="testcase-card">
      <div className="testcase-card-header">
        <div>
          <h3 className="testcase-name">{name}</h3>
        </div>
      </div>
      <div className="testcase-codeblock">
        <div className="testcase-codeblock-actions">
          <button
            type="button"
            className="render-testcase-button testcase-codeblock-button playground-button"
            onClick={() => {
              onChange(editableDefinition);
            }}
          >
            {"Render to Excalidraw"}
          </button>
          <button
            type="button"
            className="copy-mermaid-button testcase-codeblock-button playground-button"
            onClick={async () => {
              try {
                await copyToClipboard(editableDefinition);
                setCopyState("copied");
              } catch (error) {
                console.error("Failed to copy Mermaid definition:", error);
                setCopyState("error");
              }

              if (resetCopyStateTimeoutRef.current !== null) {
                window.clearTimeout(resetCopyStateTimeoutRef.current);
              }

              resetCopyStateTimeoutRef.current = window.setTimeout(() => {
                setCopyState("idle");
                resetCopyStateTimeoutRef.current = null;
              }, 1500);
            }}
            title="Copy Mermaid to clipboard"
            aria-label={`Copy Mermaid definition for ${name}`}
          >
            {copyButtonLabel}
          </button>
        </div>
        <textarea
          className="testcase-definition-textarea"
          value={editableDefinition}
          onChange={(e) => setEditableDefinition(e.target.value)}
          rows={editableDefinition.split("\n").length + 1}
        />
      </div>

      <div className="diagram-preview-grid">
        <section className="diagram-preview-panel">
          <h3 className="diagram-preview-title">{"Mermaid SVG"}</h3>
          <div
            ref={mermaidSvgRef}
            className="diagram-preview-surface diagram-preview-clickable"
            title="Click to insert as SVG image into Excalidraw"
            onClick={() => {
              const svgEl = mermaidSvgRef.current?.querySelector("svg");
              if (svgEl) {
                let width: number;
                let height: number;

                const vb = svgEl.viewBox?.baseVal;
                if (vb && vb.width > 0 && vb.height > 0) {
                  width = vb.width;
                  height = vb.height;
                } else {
                  const rect = svgEl.getBoundingClientRect();
                  width = rect.width;
                  height = rect.height;
                }

                onInsertMermaidSvg(svgEl.outerHTML, width, height);
              }
            }}
          >
            <MermaidDiagram
              key={editableDefinition}
              definition={editableDefinition}
              id={`${type}-${index}`}
            />
          </div>
        </section>

        <section className="diagram-preview-panel">
          <h3 className="diagram-preview-title">{"Excalidraw SVG"}</h3>
          <div
            className="diagram-preview-surface diagram-preview-clickable"
            title="Click to parse and insert as Excalidraw elements"
            onClick={() => {
              onChange(editableDefinition);
            }}
          >
            <ExcalidrawSvgPreview definition={editableDefinition} />
          </div>
        </section>
      </div>
    </article>
  );
};

export default SingleTestCase;