var enableMusic = true;

document.getElementById('music').addEventListener('mouseover', function() { musicHover(); });

function musicHover() {
    if (!enableMusic) {
        return;
    }
    let icon = document.getElementById('music-icon');
    icon.style.width = '8rem';
    icon.style.height = '8rem';
    icon.style.borderRadius = '500px 0 0 500px';
    let div = document.getElementById('music-expand');
    div.style.display = 'flex';
    div.style.width = '20rem';
    div.style.height = '8rem';
    let title = document.getElementById('music-title');
    title.style.display = 'block';
    let info = document.getElementById('music-info');
    info.style.display = 'block';
    let progress = document.getElementById('music-progress');
    progress.style.display = 'block';
}

document.getElementById('music').addEventListener('mouseout', function() { musicOut(); });

function musicOut() {
    let icon = document.getElementById('music-icon');
    icon.style.width = '1.5rem';
    icon.style.height = '1.5rem';
    icon.style.borderRadius = '50%';
    let div = document.getElementById('music-expand');
    div.style = '';
    let title = document.getElementById('music-title');
    title.style.display = 'none';
    let info = document.getElementById('music-info');
    info.style.display = 'none';
    let progress = document.getElementById('music-progress');
    progress.style.display = 'none';
}

function fetchData() {
    let data = fetch('https://alfieking.dev/api/v1/current_song')
    .then(response => response.json()).then(data => { return data; }) 
    .catch(error => { return null;});
    return data;
}

function updateUi(data) {
    enableMusic = true;
    document.getElementById('music').style.display = 'flex';
    document.getElementById('music-icon').src = data.image;
    document.getElementById('music-title').innerText = data.title;
    document.getElementById('music-info').innerText = data.artist + ' - ' + data.album;
    let progress = data.progress / data.length * 100;
    document.getElementById('music-progress').style.width = progress + '%';
}

function hideUi() {
    enableMusic = false;
    document.getElementById('music').style.display = 'none';
}

function update() {
    fetchData().then(data => { 
        console.log(data);
        if (data != null) {
            if (data.idle)  {
                hideUi();
            } else {
                updateUi(data);
            }
        }
        else {
            hideUi();
        }
    });
}

update();
setInterval(update, 10000);