let widgetNode = document.getElementById('widget');
let musicPlayerNode = document.getElementById('player');
let musicPlayerTitleNode = document.getElementById('title');
let musicPlayerArtistNode = document.getElementById('artist');
let musicPlayerAlbumNode = document.getElementById('album');
let musicPlayerBackgroundNode = document.getElementById('background_img');
let musicPlayerProgress = document.getElementById('progressbar');
let pausedAt = null;
let trackDuration = 0;
let trackProgress = 0;
let trackEnd = new Date();

window.addEventListener('message', function (event) {
    let message = event.detail;
    let data = message.data;
    widgetNode.classList.add('active');

    if (data == null) {
        musicPlayerNode.classList.remove('active');
        return;
    };

    if (!data.is_playing && !pausedAt) {
        pausedAt = new Date();
    };

    if (data.is_playing) {
        musicPlayerNode.classList.add('active');
        pausedAt = null;
    };

    trackDuration = data.track.duration;
    trackProgress = data.progress;
    trackEnd = new Date().getTime() + data.track.duration - data.progress;

    musicPlayerTitleNode.innerText = data.track.name;
    musicPlayerArtistNode.innerText = data.track.artists.join(', ');
    musicPlayerAlbumNode.innerText = `album: ${data.track.album}`;

    if (musicPlayerBackgroundNode.src != data.track.cover) {
        musicPlayerBackgroundNode.src = data.track.cover;
    };
});

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
};

async function update() {
    if (pausedAt && pausedAt.getTime() + 10000 < new Date().getTime()) {
        player.classList.remove('active');

        await delay(100);
        return update();
    };

    var progress;
    if (pausedAt) {
        progress = trackProgress / trackDuration * 100;
    } else {
        progress = (trackDuration - (trackEnd - new Date().getTime())) / trackDuration * 100;
    };

    if (progress >= 100) {
        progress = 100;
    };

    musicPlayerProgress.style.setProperty('--progress', `${progress}%`);

    await delay(100);
    update();
};

update();