var visualCanvas = document.getElementById('visualizer')
var audioPlayer = document.getElementById('audio-player')
var playBtn = document.getElementById('play-btn')


var playingState = 'stopped'
playBtn.onclick = () => {
  switch (playingState) {
    case 'stopped':
      getTrack(url)
      playingState = 'playing'
      playBtn.children[0].classList.remove('fa-play')
      playBtn.children[0].classList.add('fa-pause')
      requestAnimationFrame(loopingFunction);
      break
    case 'playing':
      audioPlayer.pause()
      playingState = 'paused'
      playBtn.children[0].classList.remove('fa-pause')
      playBtn.children[0].classList.add('fa-play')
      break
    case 'paused':
      audioPlayer.play()
      playingState = 'playing'
      playBtn.children[0].classList.remove('fa-play')
      playBtn.children[0].classList.add('fa-pause')
      requestAnimationFrame(loopingFunction)
      break
  }
}
audioPlayer.onended = () => {
  playingState = 'stopped'
  playBtn.children[0].classList.remove('fa-pause')
  playBtn.children[0].classList.add('fa-play')
}


audioPlayer.crossOrigin = "anonymous"
audioPlayer.volume = 0.2

let trackId = "272083179"
let clientId = "HpnNV7hjv2C95uvBE55HuKBUOQGzNDQM"
let url = `https://young-fjord-13133.herokuapp.com/https://api-v2.soundcloud.com/tracks/${trackId}?client_id=${clientId}`;
 
async function getTrack(url) {
  let res = await fetch(url);
  let data = await res.json();
  let media = await fetch(`https://young-fjord-13133.herokuapp.com/${data.media.transcodings[1].url}?client_id=${clientId}`)
  let mediaData = await media.json()
  audioPlayer.src = await `${
    mediaData.url
  }`;
  await audioPlayer.play();
  await audioCtx.resume();
}
var audioCtx;
var analyser;
var source;
var data;

var centerX = visualCanvas.width / 2,
  centerY = visualCanvas.height / 2;

// webkitAudioContext for safari
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
// we need to set the fftsize
// which  will be divided by 2
// and should contain the array size
// and it has to be a power of 2
// 2048 is the max apparently
analyser.fftSize = 2048;
// can only connect once
// create source from audio html element
var source = audioCtx.createMediaElementSource(audioPlayer);
// pass audio from source to analyser
source.connect(analyser);
// // connect it back to speakers or headphones
analyser.connect(audioCtx.destination);
// unsigned array to store audio data
// same size as fftSize divided 2
var data = new Uint8Array(analyser.frequencyBinCount - 382);
// to fill the data array
// analyser.getByteFrequencyData(data);
  visualCanvas.width = window.innerWidth;
  visualCanvas.height = window.innerHeight;
  centerX = visualCanvas.width / 2;
  centerY = visualCanvas.height / 2;


window.onload = window.onresize = function () {
  visualCanvas.width = window.innerWidth;
  visualCanvas.height = window.innerHeight;
  centerX = visualCanvas.width / 2;
  centerY = visualCanvas.height / 2;
};

function loopingFunction() { 
  if(playingState === "playing")
    requestAnimationFrame(loopingFunction);
  // read data from analyser
  analyser.getByteFrequencyData(data);

  // can be used to smooth the curve by deault is 0.8
  // analyser.smoothingTimeConstant = 0.85;
  // draw based on data
  draw(data);
  // drawCircle(data);
}

let ctx = visualCanvas.getContext('2d')
function draw(data) {
  // conver data from unsigned uint8 array to regular array
  data = [...data];
  // clear canvas
  ctx.clearRect(0, 0, visualCanvas.width, visualCanvas.height);
  let radius = 60
  let currAngle = (Math.PI * 2 * 3) / 4;
  let nextX = centerX + radius * Math.cos(currAngle);
  let nextY = centerY + radius * Math.sin(currAngle);
  let spaceArc = (Math.PI * 2.0) / data.length;
  // increase radius
  // and calculate
  data.forEach((value, i) => {
    ctx.beginPath();
    ctx.moveTo(nextX, nextY);
    ctx.lineTo(
      nextX + value * Math.cos(currAngle),
      nextY + value * Math.sin(currAngle)
    );
    var gradient = ctx.createLinearGradient(
      nextX,
      nextY,
      nextX + value * Math.cos(currAngle),
      nextY + value * Math.sin(currAngle)
    );
    gradient.addColorStop("0", "rgba(121, 224, 201, 1)");
    gradient.addColorStop("0.3", "#00193F");
    gradient.addColorStop("1", "black");
    ctx.strokeStyle = gradient;
    ctx.stroke();
    nextX = centerX + 60 * Math.cos(currAngle);
    nextY = centerY + 60 * Math.sin(currAngle);
    currAngle += spaceArc;
  });
}