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 id="divv" class="team-box ${team}-team" style="background-image: url('${team}.jpg')">
            <div id="team-name" style="background-color: ${team}">${sentenceCase(team)} Team</div>
            <div id="team-multiplier" style="background-color: ${team}">Determination: ${multipliers[team]}</div>
            <hr>
            <div id="team-total" style="background-color: ${team}">Total: ${points[team]["__total"]}</div>
            <hr>
            <div id="team-data"></div>

            <table>
            ${team_member_entry(points[team])}
            </table>
        </div>
        `
        element(`#team-container`).innerHTML += html
    }
}

function team_member_entry(teamPoints) {
    let html = ""
    const sorted = []
    for (let member in teamPoints) {
        sorted.push([member, teamPoints[member]])
    }
    sorted.sort((a, b) => b[1] - a[1])
    for (let i = 0; i<sorted.length; i++) {

    console.log(i, sorted[i], sorted[0])
        if (!INGORED_USERS.includes(sorted[i][0])) {
            html += `
            <tr class="team-member-row">
            <td>${sentenceCase(sorted[i][0])}</td>
            <td>${sorted[i][1]}</td>
            </tr>
            `
        }
    }
    return html
}

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