const app = document.querySelector<HTMLDivElement>("#app")!;

app.innerHTML = `
  <h1>SonVisuel</h1>
  <input accept="audio/*" id="file" type="file" />
  <audio id="audio" controls></audio>
  <canvas id="canvas" ></canvas>
`;

const canvas = document.querySelector("#canvas") as HTMLCanvasElement;
canvas.width = innerWidth;
canvas.height = innerHeight / 2;
const WIDTH = canvas.width;
const HEIGHT = canvas.height;
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
// ctx.fillRect(0, 0, canvas.width, canvas.height);
const file = document.getElementById("file") as HTMLInputElement;
const audio = document.getElementById("audio") as HTMLAudioElement;

ctx.fillStyle = "#111111";
ctx.fillRect(0, 0, WIDTH, HEIGHT);

function renderFrame(analyser: AnalyserNode) {
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);
  const barWidth = (WIDTH / bufferLength) * 3;
  let x = 0;
  requestAnimationFrame(() => renderFrame(analyser));
  analyser.getByteFrequencyData(dataArray);
  ctx.fillStyle = "#111111";
  ctx.fillRect(0, 0, WIDTH, HEIGHT);

  // all the magic
  dataArray.forEach((decibel, index) => {
    const c = index / bufferLength;
    const r = decibel + 25 * c;
    const g = 250 * c;
    const b = 250;
    ctx.fillStyle = `rgb(${r},${g},${b})`;
    ctx.fillRect(x, HEIGHT - decibel, barWidth, decibel);
    x += barWidth + 1;
  });
}

const setConfig = () => {
  audio.play();
  // all the setup
  const context = new AudioContext();
  const src = context.createMediaElementSource(audio);
  const analyser = context.createAnalyser();
  src.connect(analyser);
  analyser.connect(context.destination);
  analyser.fftSize = 256;
  //
  audio.play();
  renderFrame(analyser);
};

function main() {
  //audio.onplay = setConfig;

  file.onchange = async (ev: Event) => {
    if (!(ev.target as HTMLInputElement)?.files?.length) {
      return;
    }

    const url = URL.createObjectURL(ev.target?.files[0]);
    audio.src = url;
    //const url = new URL("https://cdn.pixabay.com/audio/2022/08/10/audio_d10333426a.mp3");
    //console.log("url: ", url);

    //const blob = await fetch("https://cdn.pixabay.com/audio/2022/08/10/audio_d10333426a.mp3").then((r) => r.blob());
    //audio.src = URL.createObjectURL(blob);
    //audio.src = "https://cdn.pixabay.com/audio/2022/08/10/audio_d10333426a.mp3";
    audio.load();
    audio.play();
    // all the setup
    const context = new AudioContext();
    const src = context.createMediaElementSource(audio);
    const analyser = context.createAnalyser();
    src.connect(analyser);
    analyser.connect(context.destination);
    analyser.fftSize = 256;
    //
    audio.play();
    renderFrame(analyser);
  };
}

// main();
window.onload = main;

//audio.addEventListener("play", setConfig);