import { AudioPlayer } from './audioPlayer.js';
import { Visualizer } from './visualizer.js';

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

const audioPlayer = new AudioPlayer(audioContext, 'http://stream-174.zeno.fm/c58ssug3668uv?zt=eyJhbGciOiJIUzI1NiJ9.eyJzdHJlYW0iOiJjNThzc3VnMzY2OHV2IiwiaG9zdCI6InN0cmVhbS0xNzQuemVuby5mbSIsInJ0dGwiOjUsImp0aSI6IjY0U1pWa1RFVGJ5aS16VVJjZUE0c2ciLCJpYXQiOjE3MzkyNzc4NzQsImV4cCI6MTczOTI3NzkzNH0.fOQetCgM5m28EmqCIxLYh0hkPzetEDO8ixqTH0cNOw0');
const visualizer = new Visualizer(audioContext, 'visualizer');

audioPlayer.connectAnalyser(visualizer.analyser);

const playButton = document.getElementById('playButton');
const playIcon = playButton.querySelector('.play-icon');
const pauseIcon = playButton.querySelector('.pause-icon');

playButton.addEventListener('click', () => {
  if (audioPlayer.isPlaying) {
    audioPlayer.pause();
    playIcon.style.display = 'block';
    pauseIcon.style.display = 'none';
  } else {
    audioPlayer.play();
    playIcon.style.display = 'none';
    pauseIcon.style.display = 'block';
  }
});

function lerp(start, end, amt) {
  return (1 - amt) * start + amt * end;
}

function updateBackgroundColor(amplitude) {
  // Convert hex colors to RGB
  const startColor = {
    r: 0x1f, g: 0x03, b: 0x6b
  };
  const endColor = {
    r: 0x6a, g: 0x4a, b: 0xc2
  };
  
  // Interpolate between colors based on amplitude
  const r = Math.round(lerp(startColor.r, endColor.r, amplitude));
  const g = Math.round(lerp(startColor.g, endColor.g, amplitude));
  const b = Math.round(lerp(startColor.b, endColor.b, amplitude));
  
  document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
}

function animate() {
  const amplitude = visualizer.draw();
  updateBackgroundColor(amplitude);
  requestAnimationFrame(animate);
}
animate();