const player = (function(){
  let player = {}
  let current_index = -1
  let audio = document.createElement('audio')
  let tracks = [
    { file: "/mp3/Xena Vectra - Sector 6.mp3", title: "Sector 6" },
    { file: "/mp3/Xena Vectra - Hacking the Wavefields.mp3", title: "Hacking the Wavefields" },
    { file: "/mp3/Xena Vectra - Cruise.mp3", title: "Cruise" },
  ]
  function init(){
    bind()
    build()
    // play(0)
  }
  function bind(){
    audio.addEventListener('play', handlePlay)
    audio.addEventListener('pause', handlePause)
    audio.addEventListener('ended', handleEnded)
    document.querySelector('.player .icon').addEventListener('click', togglePlaying)
    document.querySelector('.player .track').addEventListener('click', play)
    document.querySelector('.player .playlistToggle').addEventListener('click', togglePlaylist)
  }
  function build() {
    tracks.forEach((track, i) => {
      let el = document.createElement('li')
      el.innerHTML = track.title
      el.addEventListener('click', () => {
        if (is_mobile) {
          hidePlaylist()
        }
        shards.rebuild()
        play(i)
      })
      document.querySelector('.playlist ul').appendChild(el)
    })
    document.querySelector('.player .track').innerHTML = tracks[0].title
  }
  function play(n){
    const active = document.querySelector('.playlist ul .active')
    if (active) active.classList.remove('active')
    document.querySelector('.playlist ul').children[n].classList.add('active')

    current_index = (n + tracks.length) % tracks.length
    audio.src = tracks[n].file
    audio.play()
    document.querySelector('.player .track').innerHTML = tracks[n].title
  }
  function handlePlay(){
    document.querySelector('.player').classList.add('playing')
    document.querySelector('.player').classList.remove('paused')
    shards.step()
  }
  function handlePause(){
    document.querySelector('.player').classList.remove('playing')
    document.querySelector('.player').classList.add('paused')
  }
  function handleEnded(){
    shards.rebuild()
    play(current_index+1)
  }
  function togglePlaying() {
    // sounds.play('click')
    if (current_index == -1) {
      play(0)
    } else {
      if (audio.paused) audio.play()
      else audio.pause()
    }
  }
  function togglePlaylist() {
    site.navigateHash('')
    document.querySelector('.playlist').classList.toggle('visible')
  }
  function hidePlaylist() {
    document.querySelector('.playlist').classList.remove('visible')
  }
  init()
  return { hidePlaylist }
})()