const audio = document.querySelector('#stream')
const playPauseButton = document.querySelector('[name="play-pause"]')
const playPauseButtonIcon = playPauseButton.querySelector('i.icon')
const volumeControl = document.querySelector('[name="volume"]')
const currentlyPlaying = document.querySelector('.currently-playing-title')
const volumeButton = document.querySelector('[name="mute"]')
const volumeButtonIcon = volumeButton.querySelector('i.icon')

let isPlaying = false
let fetchInterval = null
let currentVolume = 0.2

audio.volume = currentVolume
const adjustVolumeIcon = volume => {
    volumeButtonIcon.classList.remove('icon-silenci')
    volumeButtonIcon.classList.remove('icon-so')
  
    if (volume === 0) {
      volumeButtonIcon.classList.add('icon-silenci')
    } else {
      volumeButtonIcon.classList.add('icon-so')
  }
}
volumeControl.addEventListener('input', () => {
    const volume = parseFloat(volumeControl.value)
  
    audio.volume = currentVolume = volume
    currentVolume = volume
  
    adjustVolumeIcon(volume)
  })
  
  volumeButton.addEventListener('click', () => {
    if (audio.volume > 0) {
      adjustVolumeIcon(0)
      audio.volume = 0
      volumeControl.value = 0
    } else {
      adjustVolumeIcon(currentVolume)
      audio.volume = currentVolume
      volumeControl.value = currentVolume
    }
})

playPauseButton.addEventListener('click', () => {
    if (isPlaying) {
      audio.pause()
  
      playPauseButtonIcon.classList.remove('icon-pausa')
      playPauseButtonIcon.classList.add('icon-play')

    } else {
      audio.play()
  
      playPauseButtonIcon.classList.remove('icon-play')
      playPauseButtonIcon.classList.add('icon-pausa')
    }
    isPlaying = !isPlaying
})