import {
  SYMBOL_ACCENT,
  SYMBOL_FILL,
  SYMBOL_STROKE,
  SymbolSvg,
} from "./primitives";

const SIGNAL_LINE_WIDTH = 1.8;
const SIGNAL_CANVAS_SIZE = 64;
const SIGNAL_WORKSPACE_OCCUPANCY = 0.6;
const SIGNAL_SOURCE_BOUNDS = {
  left: 9,
  right: 60,
  top: 6,
  bottom: 42,
} as const;
const SIGNAL_SOURCE_CENTER = {
  x: (SIGNAL_SOURCE_BOUNDS.left + SIGNAL_SOURCE_BOUNDS.right) / 2,
  y: (SIGNAL_SOURCE_BOUNDS.top + SIGNAL_SOURCE_BOUNDS.bottom) / 2,
} as const;
const SIGNAL_CANVAS_CENTER = { x: 32, y: 24 } as const;
const SIGNAL_CONTENT_SCALE =
  (SIGNAL_CANVAS_SIZE * SIGNAL_WORKSPACE_OCCUPANCY) /
  (SIGNAL_SOURCE_BOUNDS.right - SIGNAL_SOURCE_BOUNDS.left);
const SIGNAL_CONTENT_TRANSFORM = `translate(${SIGNAL_CANVAS_CENTER.x} ${SIGNAL_CANVAS_CENTER.y}) scale(${SIGNAL_CONTENT_SCALE}) translate(${-SIGNAL_SOURCE_CENTER.x} ${-SIGNAL_SOURCE_CENTER.y})`;

export const SIGNAL_OUTPUT_PORT_ANCHOR = {
  x:
    SIGNAL_CANVAS_CENTER.x +
    (SIGNAL_SOURCE_BOUNDS.right - SIGNAL_SOURCE_CENTER.x) *
      SIGNAL_CONTENT_SCALE,
  y: SIGNAL_CANVAS_CENTER.y,
} as const;

function SignalOutput() {
  return (
    <g
      fill="none"
      stroke={SYMBOL_STROKE}
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={SIGNAL_LINE_WIDTH}
    >
      <path d="M46 24h14" />
      <path d="m54 20 6 4-6 4" />
    </g>
  );
}

export function AmesimStep0Symbol() {
  return (
    <SymbolSvg className="component-symbol-amesim-step0" domain="signal">
      <g data-signal-source="step0" transform={SIGNAL_CONTENT_TRANSFORM}>
        <circle
          cx="27"
          cy="24"
          fill={SYMBOL_FILL}
          r="18"
          stroke={SYMBOL_STROKE}
          strokeWidth={SIGNAL_LINE_WIDTH}
        />
        <path
          d="M14 30h8V17h18"
          fill="none"
          stroke={SYMBOL_ACCENT}
          strokeLinecap="square"
          strokeLinejoin="miter"
          strokeWidth="2.2"
        />
        <SignalOutput />
      </g>
    </SymbolSvg>
  );
}

export function AmesimUd00Symbol() {
  return (
    <SymbolSvg className="component-symbol-amesim-ud00" domain="signal">
      <g data-signal-source="ud00" transform={SIGNAL_CONTENT_TRANSFORM}>
        <circle
          cx="27"
          cy="24"
          fill={SYMBOL_FILL}
          r="18"
          stroke={SYMBOL_STROKE}
          strokeWidth={SIGNAL_LINE_WIDTH}
        />
        <path
          d="M13 30h5l5-10h5l5-9 5 19h3"
          fill="none"
          stroke={SYMBOL_ACCENT}
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2.2"
        />
        <SignalOutput />
      </g>
    </SymbolSvg>
  );
}