const colorThief = new ColorThief();
const musicElement = document.querySelector('#music');
const progressBarElement = musicElement.querySelector('#music > .progress-bar');
const titleElement = progressBarElement.querySelector('#music > .progress-bar > .data > .title');
const artistsElement = progressBarElement.querySelector('#music > .progress-bar > .data > .artists');
const coverElement = progressBarElement.querySelector('#music > .progress-bar > .cover');

const handlers = {
    'target': (attributes) => {
        const target = document.getElementById(attributes.id);
        target.style.setProperty('--progress-size', `${attributes.progress}`);
    },
    'music': (attributes) => {
        titleElement.textContent = attributes.title;
        artistsElement.textContent = attributes.artists;
        musicElement.style.setProperty('--progress-size', `${(1 - attributes.progress) * 100}%`);
        const url = new URL(location);
        url.pathname = '/image';
        const urlSearchParams = new URLSearchParams();
        urlSearchParams.set('src', attributes.image);
        url.search = urlSearchParams.toString();
        coverElement.src = url;
        const colors = colorThief.getPalette(coverElement, 2);
        progressBarElement.style.setProperty('--primary-color', `rgb(${colors[0][0]}, ${colors[0][1]}, ${colors[0][2]})`);
        progressBarElement.style.setProperty('--secondary-color', `rgb(${colors[1][0]}, ${colors[1][1]}, ${colors[1][2]})`);
        musicElement.classList.remove('hidden');
    },
};

const connectWebSocket = () => {
    const ws = new WebSocket('ws://localhost:8000/ws/v1/overlay');

    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        handlers[data.type](data.attributes);
    };

    ws.onclose = () => connectWebSocket();
};

connectWebSocket();