import { useEffect, useState, useRef } from "react";

type WaveformProps = {
  audioContext: AudioContext;
};

export const Waveform: React.FC<WaveformProps> = ({ audioContext }: WaveformProps) => {
  const [audioData, setAudioData] = useState<AudioBuffer | null>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  // load audio data on page load:
  useEffect(() => {
    (async function() {
      console.log("fetching audio data...");

      const videoID = "s_oJYdRlrv0";

      const resp = await fetch(`http://localhost:8888/api/audio?video_id=${videoID}`)
      console.log("resp =", resp)

      const body = await resp.arrayBuffer();
      console.log("body =", body)

      const data = await audioContext.decodeAudioData(body);

      console.log("decodedAudio =", data, "len =", data.length);
      setAudioData(data);
    })();
  }, [audioContext]);

  // render waveform to canvas when audioData is updated:
  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas == null) {
      console.error("no canvas ref available");
      return
    }

    const ctx = canvas.getContext("2d");
    if (ctx == null) {
      console.error("no 2d context available");
      return;
    }

    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if (audioData == null) {
      return;
    }

    console.log("rendering audio")
  }, [audioData]);

  // render component:

  console.log("rendering, audioData =", audioData);

  const canvasProps = {width: "100%", height: "500px"};
  return <canvas ref={canvasRef} style={canvasProps}></canvas>
}