import { StemPlot } from './StemPlot'

type Props = {
  amplitudes: number[]
  /** degrees */
  phasesDeg: number[]
  color: string
}

const PHASE_TICKS = [-180, -90, 0, 90, 180]
const degLabel = (v: number) => `${v}°`

/** Fourier coefficients of the tone: amplitude and phase per harmonic. */
export function SpectrumPlot({ amplitudes, phasesDeg, color }: Props) {
  const aMax = Math.max(1, ...amplitudes)
  const aTicks = [0, aMax / 2, aMax]
  return (
    <div className="spectrum">
      <div className="plot-label">Amplitude by harmonic</div>
      <StemPlot values={amplitudes} yMin={0} yMax={aMax * 1.05} yTicks={aTicks} color={color} tickLabel={(v) => v.toFixed(1)} />
      <div className="plot-label">Phase by harmonic</div>
      <StemPlot values={phasesDeg} yMin={-190} yMax={190} yTicks={PHASE_TICKS} color={color} tickLabel={degLabel} />
    </div>
  )
}