import Stateful from './silver.min.js';

const musicMeta = new Stateful({
    artworkURL: 'https://arimelody.space/uploads/musicart/free2play.png',
    title: 'falling asleep - house version',
    artist: 'ari melody',
    album: 'free2play',
});

const elArtwork = document.getElementById('artwork');
const elTitle = document.getElementById('title');
const elArtistAlbum = document.getElementById('artist-album');
const elMetadata = document.getElementById('metadata');

function setMetadata(artworkURL, title, artist, album) {
    musicMeta.set({ artworkURL, title, artist, album });
}

document.addEventListener('readystatechange', () => {
    musicMeta.onUpdate(value => {
        elArtwork.src = value.artworkURL;
        elTitle.innerText = value.title;
        elArtistAlbum.innerText = `${value.artist} • ${value.album}`;
        document.title = `Now playing: ${value.artist} - ${value.title}`;
        console.log(`Now playing: ${value.artist} - ${value.title}`);

        const maxWidth = elMetadata.getBoundingClientRect().width;
        elTitle.classList.remove('marquee');
        elArtistAlbum.classList.remove('marquee');
        if (elTitle.getBoundingClientRect().width > maxWidth) {
            elTitle.classList.add('marquee');
        }
        if (elArtistAlbum.getBoundingClientRect().width > maxWidth) {
            elArtistAlbum.classList.add('marquee');
        }
    });
});

window.setMetadata = setMetadata;