// Magnitude spectrum of the rendered stroke, log-frequency axis, with the
// retained plate modes overlaid and colored by nodal-diameter order. A
// cymbal's spectrum is far denser than the sibling triangle's: below a
// kilohertz the partials are still resolvable, above it the modal overlap
// exceeds one and the spectrum fills in, which is what a wash is.

import { magnitudeSpectrum } from '../../lib/fft';
import { useCanvas, drawFrame, PLOT_COLORS, modeColor } from './canvasUtils';

interface Props {
  y: Float32Array;
  sampleRate: number;
  modeF: Float32Array;
  modeN: Float32Array;
}

const F_LO = 60;
const F_HI = 24000;
const DB_RANGE = 80;

export default function SpectrumPlot({ y, sampleRate, modeF, modeN }: Props) {
  let maxN = 1;
  for (let i = 0; i < modeN.length; i++) maxN = Math.max(maxN, modeN[i]);
  const ref = useCanvas(
    (ctx, w, h) => {
      drawFrame(ctx, w, h);
      const padL = 34;
      const padB = 18;
      const pw = w - padL - 6;
      const ph = h - padB - 8;
      const fx = (f: number) =>
        padL + ((Math.log10(f) - Math.log10(F_LO)) / (Math.log10(F_HI) - Math.log10(F_LO))) * pw;

      ctx.font = '10px system-ui';
      ctx.textAlign = 'center';
      for (const f of [100, 200, 500, 1000, 2000, 5000, 10000, 20000]) {
        const x = fx(f);
        ctx.strokeStyle = PLOT_COLORS.grid;
        ctx.beginPath();
        ctx.moveTo(x, 8);
        ctx.lineTo(x, 8 + ph);
        ctx.stroke();
        ctx.fillStyle = PLOT_COLORS.axis;
        ctx.fillText(f >= 1000 ? `${f / 1000}k` : `${f}`, x, h - 5);
      }
      ctx.textAlign = 'right';
      for (let db = 0; db >= -DB_RANGE; db -= 20) {
        const yy = 8 + (-db / DB_RANGE) * ph;
        ctx.strokeStyle = PLOT_COLORS.grid;
        ctx.beginPath();
        ctx.moveTo(padL, yy);
        ctx.lineTo(padL + pw, yy);
        ctx.stroke();
        ctx.fillStyle = PLOT_COLORS.axis;
        ctx.fillText(`${db}`, padL - 4, yy + 3);
      }

      const { mag, size } = magnitudeSpectrum(y, 32768);
      let peak = 0;
      for (let i = 1; i < mag.length; i++) peak = Math.max(peak, mag[i]);
      if (peak <= 0) return;

      // mode lines first so the trace draws on top
      for (let i = 0; i < modeF.length; i++) {
        const f = modeF[i];
        if (f < F_LO || f > F_HI) continue;
        ctx.strokeStyle = modeColor(modeN[i], maxN, 0.35);
        ctx.beginPath();
        ctx.moveTo(fx(f), 8 + ph * 0.45);
        ctx.lineTo(fx(f), 8 + ph);
        ctx.stroke();
      }

      ctx.strokeStyle = PLOT_COLORS.trace;
      ctx.beginPath();
      let started = false;
      for (let px = 0; px <= pw; px++) {
        const f = 10 ** (Math.log10(F_LO) + (px / pw) * (Math.log10(F_HI) - Math.log10(F_LO)));
        const bin = Math.min(mag.length - 1, Math.round((f / sampleRate) * size));
        const fNext =
          10 ** (Math.log10(F_LO) + ((px + 1) / pw) * (Math.log10(F_HI) - Math.log10(F_LO)));
        const binNext = Math.min(
          mag.length - 1,
          Math.max(bin + 1, Math.round((fNext / sampleRate) * size)),
        );
        let m = 0;
        for (let b = bin; b < binNext; b++) m = Math.max(m, mag[b]);
        const db = 20 * Math.log10(m / peak + 1e-12);
        const yy = 8 + Math.min(ph, (-db / DB_RANGE) * ph);
        if (!started) {
          ctx.moveTo(padL + px, yy);
          started = true;
        } else {
          ctx.lineTo(padL + px, yy);
        }
      }
      ctx.stroke();

      ctx.textAlign = 'left';
      ctx.fillStyle = PLOT_COLORS.axis;
      ctx.fillText('mode lines colored by nodal diameters, 0', padL + 4, 18);
      const x0 = padL + 200;
      for (let n = 0; n <= maxN; n++) {
        ctx.fillStyle = modeColor(n, maxN, 0.95);
        ctx.fillRect(x0 + (n / maxN) * 70, 11, 70 / (maxN + 1) + 1, 8);
      }
      ctx.fillStyle = PLOT_COLORS.axis;
      ctx.fillText(`${maxN}`, x0 + 74, 18);
    },
    [y, sampleRate, modeF, modeN, maxN],
    200,
  );
  return <canvas ref={ref} />;
}