const playBtn = document.getElementById("play-btn")
const pauseBtn = document.getElementById("pause-btn")
const stopBtn = document.getElementById("stop-btn");
const selectMusic = document.getElementById('select-music');
const volumeControl = document.getElementById('volume-control');
const volumeIndicator = document.getElementById('volume-indicator');
const greeting = document.getElementById('greeting');

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

const audios = [
    {title: 'Jingle all the way', source: 'bells.mp3'},    
    {title: 'Nice music one', source: 'https://cdn.pixabay.com/audio/2021/09/25/audio_153f263349.mp3'},
    {title: 'Nice music two', source: 'https://cdn.pixabay.com/audio/2021/10/23/audio_15e5f8466c.mp3'},
    {title: 'Nice music three', source: 'https://cdn.pixabay.com/audio/2021/11/26/audio_f9f445c4a4.mp3'},
    {title: 'Nice music four', source: 'https://cdn.pixabay.com/audio/2021/11/25/audio_d12db738d8.mp3'},
    {title: 'Nice music five', source: 'https://cdn.pixabay.com/audio/2021/11/23/audio_f6065906f2.mp3'}     
];

function renderAudios() {
    let listAudios = '';
    for(let i = 0; i < audios.length; i++) {
        listAudios += `<option value=${audios[i].title}>${audios[i].title}</option>`;
    }
    selectMusic.innerHTML = listAudios;    
}

renderAudios();

let music = new Audio(audios[0].source);

selectMusic.addEventListener('change', () => {
    music.pause();
    music.currentTime = 0;
    const index = selectMusic.selectedIndex;
    const source = audios[index].source;
    const title = audios[index].title;
    greeting.textContent = `🎄 ${title} 🔔`;
    music = new Audio(source);
    music.play();
})

volumeControl.addEventListener('input', () => {
    volumeIndicator.textContent = volumeControl.value + '%';
    music.volume = volumeControl.value / 100;
})

playBtn.addEventListener('click', () => {
    music.play();
});

pauseBtn.addEventListener('click', () => {
    music.pause();
})

stopBtn.addEventListener('click', () => {
    music.pause();
    music.currentTime = 0;
})

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