const playBtn = document.getElementById("play-btn")
const pauseBtn = document.getElementById("pause-btn")
const stopBtn = document.getElementById("stop-btn")

// const audio = document.querySelector("audio")
const audio = new Audio('bells.mp3');

const tree = document.getElementById("tree-emoji") 
const bell = document.getElementById("bell-emoji") 

const audioOptions = [ 'bells', 'jingle_bells' ]
let options

const setupAudio = () => {
    playBtn.addEventListener('click', () => {
         audio.play()
         toggleDancingEmoji(audio.paused)
    })
    pauseBtn.addEventListener('click', () => {
         audio.pause()
         toggleDancingEmoji(audio.paused)
    })
    stopBtn.addEventListener('click', () => {
         audio.pause()
         toggleDancingEmoji(audio.paused)
         audio.currentTime = 0;
    })
    audio.volume = 0.2;
}

audio.onended = function() {
    toggleDancingEmoji(true)
};


const setupAudioOptions = () => {
    options = document.createElement('select')
    options.name = audioOptions[0]
    options.onchange = () => { selectAudio() }
    for(let i=0; i<audioOptions.length; i++) {
        options.innerHTML += `
        <option value="${audioOptions[i]}">${audioOptions[i]}</option>
        `
    }
    document.getElementsByClassName('container')[0].prepend(options)
}

const selectAudio = () => {
    audio.src = `${options.value}.mp3`
    toggleDancingEmoji(audio.paused)
}

setupAudio()
setupAudioOptions()

const toggleDancingEmoji = (isAudioPaused) => {
    if (isAudioPaused) {
        tree.classList.remove("dancing-tree");
        bell.classList.remove("dancing-bell");
    } else {
        tree.classList.add("dancing-tree");
        bell.classList.add("dancing-bell");
    }
}


// Task: 
// - Add the functionality to play, pause and stop the jingling bells (bells.mp3).

// Stretch goals:
// - Add volume controls.
// - Allow the user to select different sounds.