let colour;

window.onload = () => {
    colour = new URLSearchParams(window.location.search).get('colour');
    if (!colour) {
        alert(`The 'colour' query parameter was not provided; cannot proceed!`);
        document.getElementById('setup').hidden = true;
        const statusText = document.getElementById('status');
        statusText.innerText = `The 'colour' query parameter was not provided; cannot proceed!`;
    }
    colour = decodeURIComponent(colour);
}

function login() {
    const statusText = document.getElementById('status');
    const token = document.getElementById('token').value;
    document.getElementById('setup').hidden = true;
    statusText.innerText = 'Connecting...';

    const socket = new WebSocket(`wss://ws.revolt.chat?version=1&token=${token}`);
    let success = false;
    socket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        console.log('<', data);
        if (data.type == "Ready") {
            success = true;
            const servers = data.servers;
            socket.close();

            statusText.innerText = `Received ${servers.length} servers!`;

            const serverList = document.getElementById('servers');
            for (const server of servers) {
                const title = document.createElement('h3');
                title.innerText = server.name;
                serverList.appendChild(title);

                const roleDiv = document.createElement('div');
                serverList.appendChild(roleDiv);

                for (const role of Object.entries(server.roles)) {
                    const roleButton = document.createElement('button');
                    roleButton.innerText = role[1].name;
                    roleDiv.appendChild(roleButton);
                    roleDiv.appendChild(document.createElement('br'));

                    roleButton.onclick = async () => {
                        const response = confirm(`If your bot has access to it, this will update the color of the role "${role[1].name}" (${role[0]}) in the server "${server.name}" to your new gradient. Are you sure you want to continue?\n\nThe current color of this role is: ${role[1].colour}`);
                        if (!response) return;

                        try {
                            const res = await fetch(
                                `https://api.revolt.chat/servers/${server._id}/roles/${role[0]}`,
                                {
                                    method: 'PATCH',
                                    headers: {
                                        "X-Bot-Token": token,
                                        "Content-Type": 'application/json',
                                    },
                                    body: JSON.stringify({
                                        colour: colour,
                                    }, null, 4),
                                }
                            );
                            console.log(res);
                            alert(`Response: ${res.status} - ${res.statusText}`);
                        } catch(e) {
                            console.log(e);
                            alert('Error: ' + e);
                        }
                    }
                }
            }
        }
    }

    socket.onclose = (event) => {
        if (!success) {
            statusText.innerText = `Disconnected - ${event.code}`;
            document.getElementById('setup').hidden = false;
        }
    }
}