import { API_ROOT, INGORED_USERS } from "./global.js"  

const element = (e) => document.querySelector(e)

async function update() {
    const data = await get_leaderboard_data()
    fill_metadata(data.settings)
    fill_leaderboard(data.points, data.settings.multiplier)
}


function sentenceCase(string) {
    const out = string.slice(0, 1).toUpperCase() + string.slice(1).toLowerCase()
    return out
}

async function get_leaderboard_data() {
    const response = await fetch(`${API_ROOT}/leaderboard/`)
    console.log(API_ROOT)
    const data = await response.json()
    return data
}

function fill_metadata(settings) {
    element("#prompt").innerHTML = `"${settings.prompt}"`
}

function clear_leaderboard() {
    element(`#team-container`).innerHTML = ""
}

function fill_leaderboard(points, multipliers) {
    clear_leaderboard()
    for (let team of ["green", "purple"]) {
        console.log(team)
        const html = `
        <div class="team-box ${team}-team">
            <div id="team-data"></div>
            <div id="team-name">${sentenceCase(team)} Team</div>
            <div id="team-multiplier">x${multipliers[team]}</div>
            <div id="team-total">Total: ${points[team]["__total"]}</div>
            ${team_member_entry(points[team])}
        </div>
        `
        element(`#team-container`).innerHTML += html
    }
}

function team_member_entry(teamPoints) {
    let html = ""
    for (let member in teamPoints) {
        if (!INGORED_USERS.includes(member)) {
            html += `
            <div class="team-member-row">
                <div class="team-member-name">${sentenceCase(member)}</div>
                <div class="team-member-score">${teamPoints[member]}</div>
            </div>
            `
        }
    }
    return html
}

document.addEventListener("DOMContentLoaded", async () => {
    update()
    const urlParams = new URLSearchParams(window.location.search);
    const poll = urlParams.get("poll") || 3000
    const polling = setInterval(update, poll)
});