const body = document.querySelector('body')
const playBtn = document.getElementById("play-btn")
const pauseBtn = document.getElementById("pause-btn")
const stopBtn = document.getElementById("stop-btn")
const forwardBtn = document.getElementById('forward-btn')
const previousBtn = document.getElementById('previous-btn')
const greeting = document.getElementById('greeting')
const actualSongInput = new Audio('./bells.mp3')
const nowPlaying = document.getElementById('current-song-text')

// renders top greeting message and changes letter color for every other letter
const renderGreeting = (greetingMsg) => {
    const string = greetingMsg
    
    for (let i = 0; i < string.length; i++) {
        let str = string[i]
        let textElement = document.createElement('span')
        greeting.appendChild(textElement)
        textElement.textContent = str
        textElement.style.color = i % 2 ? 'rgba(255,234,230,255)' : 'rgba(128,222,144,255)'
    }
}
// renders the song playlist
let songCompilation = [
    {
        name: "Jingle Bell Rock",
        path: "./jbr.mp3"
    },
    {
        name: "First Noel R&B",
        path: "https://www.freexmasmp3.com/files/first-noel-r&b.mp3"
    },
    {
        name: "Bethlehem Jazz",
        path: "https://www.freexmasmp3.com/files/bethlem-jazz.mp3"
    },
    {
        name: "Scrimba Bells",
        path: "./bells.mp3"
    }
]

// create audio element via pure js 
// set current index to 0 (or the first song)
let currentSong = document.createElement('audio')
let currentSong_index = 0;

// this method takes in an index number,
// sets the audio element src created by pure js,
// and loads the src prior to playing 
const loadSong = (index) => {     
    currentSong.src = songCompilation[index].path
    currentSong.load()
    body.style.background = index % 2 ? "var(--light-green)" : "var(--blue)"
}

// load song with the current index on render
loadSong(currentSong_index)

// the song will start playing once button is hit;
// this function takes in the current song 
const playAudio = (audioSrc) => {
    audioSrc.currentTime = 0
    audioSrc.play()
    nowPlaying.textContent = " 🎅 Now Playing: " + songCompilation[currentSong_index].name + "🎅"
}
// controlling the the song index based on current index
// reloading the song with the returned new song index,
// play song 
const nextSong = (audioSrc) => { 
    if (currentSong_index < songCompilation.length -1) {
        currentSong_index++
    } else {
        currentSong_index = 0
    }

    loadSong(currentSong_index) // reloading song based on new current index
    playAudio(audioSrc) // play the current song directly since current song is being changed in loadsrc
}

const prevSong = (audioSrc) => { 
    // comparing current placement with total amount of songs
    if (currentSong_index > 0) {
        currentSong_index = currentSong_index - 1
    } else {
        currentSong_index = songCompilation.length - 1
    }
    
    // load new song with updated index
    loadSong(currentSong_index)
    
    // play song with new index attached after loading
    playAudio(audioSrc)
}

const pauseAudio = (audioSrc) => {
    console.log('Pausing temporarily')
    audioSrc.pause()
}

const stopAudio = (audioSrc) => {
    audioSrc.pause() 
    audioSrc.currentTime = 0 
}

// controls the volume 
const volumeControl = document.getElementById('volume-control')

volumeControl.oninput = (e) => {
    currentSong.volume = e.currentTarget.value / 100
} 

// if the song ends on it's own, this will render the next song
currentSong.onended = () => {nextSong()}

// connecting methods to their corresponding buttons
previousBtn.onclick = () => {prevSong(currentSong)} 
playBtn.onclick = () => {playAudio(currentSong)} 
pauseBtn.onclick = () => {pauseAudio(currentSong)}
stopBtn.onclick = () => {stopAudio(currentSong)}
forwardBtn.onclick = () => {nextSong(currentSong)}

// renders the greeting on top of the page
renderGreeting('Merry Christmas!')