import { HarmonicSliders } from './HarmonicSliders'
import { SpectrumPlot } from './SpectrumPlot'
import { WaveformPlot } from './WaveformPlot'
import { degToRad, randomPhasesDeg, zeros } from '../synth'

type Props = {
  name: 'A' | 'B'
  otherName: 'A' | 'B'
  color: string
  amplitudes: number[]
  phasesDeg: number[]
  setPhasesDeg: (p: number[]) => void
  onCopyFromOther: () => void
  onPlay: () => void
  playing: boolean
  yMax: number
}

/** Editor and plots for one tone. Amplitudes are shared; only phases are edited here. */
export function ToneColumn({ name, otherName, color, amplitudes, phasesDeg, setPhasesDeg, onCopyFromOther, onPlay, playing, yMax }: Props) {
  const n = amplitudes.length
  const phases = phasesDeg.map(degToRad)
  return (
    <section className="card tone" style={{ borderTopColor: color }}>
      <header className="tone-header">
        <h2 style={{ color }}>Tone {name}</h2>
        <button className="primary" onClick={onPlay} disabled={playing}>
          Play {name}
        </button>
      </header>

      <div className="plot-label">One period of the waveform</div>
      <WaveformPlot amplitudes={amplitudes} phases={phases} color={color} yMax={yMax} />

      <SpectrumPlot amplitudes={amplitudes} phasesDeg={phasesDeg} color={color} />

      <div className="controls-header">
        <h3>Phases</h3>
        <div className="button-row">
          <button onClick={() => setPhasesDeg(zeros(n))}>Zero</button>
          <button onClick={() => setPhasesDeg(randomPhasesDeg(n))}>Random</button>
          <button onClick={onCopyFromOther}>Copy from {otherName}</button>
        </div>
      </div>
      <HarmonicSliders
        values={phasesDeg}
        min={-180}
        max={180}
        step={1}
        unit="°"
        onChange={(k, v) => setPhasesDeg(phasesDeg.map((p, i) => (i === k ? v : p)))}
      />
    </section>
  )
}