import { postData, verifyLogin } from "./client.js";
import { formatSalary } from "./utils.js";

const token = window.localStorage.getItem("token");

const highest = document.querySelector("#highest");

updateHighest();
updateFavorites();
updatePaydirt();
updateOffense();

window.addEventListener("pageshow", e => {
    if (e.persisted) {
        updateFavorites();
    }
})

async function updateOffense() {
    if (!verifyLogin()) return;


    const offenseHeader = document.querySelector("#offense thead");
    const offenseBody = document.querySelector("#offense tbody");
    

    let resultObject = await postData("/getHighestOffense", { amount: 10 }, token);
    console.log(resultObject);

    if (resultObject.matches.length === 0) {
       alert("Error loading scores");
       return;
    }

    offenseHeader.innerHTML = "";
    const headerRow = document.createElement("tr");
    //Object.keys(resultObject.matches[0]).forEach(attribute => {
    //   headerRow.innerHTML += `<td>${attribute}</td>`; 
    //});
    headerRow.innerHTML = `
            <td>Position</td>
            <td>Name</td>
            <td>Team</td>
            <td>Offense Score</td>
        `;
    offenseHeader.appendChild(headerRow);

    offenseBody.innerHTML = "";
    resultObject.matches.forEach(player => {
        const row = document.createElement("tr");

        row.innerHTML = `
            <td>${player.Position}</td>
            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
            <td>${player.Team}</td>
            <td>${(player.OffenseScore + "000000").slice(0, 8)}</td>
        `;
        offenseBody.appendChild(row);
    });
};

async function updatePaydirt() {
    if (!verifyLogin()) return;


    const paydirtHeader = document.querySelector("#paydirt thead");
    const paydirtBody = document.querySelector("#paydirt tbody");
    

    let resultObject = await postData("/getHighestPaydirt", { amount: 10 }, token);
    console.log(resultObject);

    if (resultObject.matches.length === 0) {
       alert("Error loading scores");
       return;
    }

    paydirtHeader.innerHTML = "";
    const headerRow = document.createElement("tr");
    //Object.keys(resultObject.matches[0]).forEach(attribute => {
    //   headerRow.innerHTML += `<td>${attribute}</td>`; 
    //});
    headerRow.innerHTML = `
            <td>Position</td>
            <td>Name</td>
            <td>Team</td>
            <td>Paydirt Score</td>
        `;
    paydirtHeader.appendChild(headerRow);

    paydirtBody.innerHTML = "";
    resultObject.matches.forEach(player => {
        const row = document.createElement("tr");

        row.innerHTML = `
            <td>${player.Position}</td>
            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
            <td>${player.Team}</td>
            <td>${(player.PaydirtScore + "000000").slice(0, 8)}</td>
        `;
        paydirtBody.appendChild(row);
    });
};

async function updateHighest() {
    if (!verifyLogin()) return;

    const tableHeader = document.querySelector("#highest thead");
    const tableBody = document.querySelector("#highest tbody");
    
    let resultObject = await postData("/getHighest", { amount: 10 }, token);
    console.log(resultObject);

    if (resultObject.matches.length === 0) {
       alert("Error loading highest");
       return;
    }

    tableHeader.innerHTML = "";
    const headerRow = document.createElement("tr");
    //Object.keys(resultObject.matches[0]).forEach(attribute => {
    //   headerRow.innerHTML += `<td>${attribute}</td>`; 
    //});
    headerRow.innerHTML = `
            <td>Name</td>
            <td>Contract</td>
            <td>Team</td>
            <td>Position</td>
        `;
    tableHeader.appendChild(headerRow);

    tableBody.innerHTML = "";
    resultObject.matches.forEach(player => {
        const row = document.createElement("tr");

        //for (attribute in player) {
        //    row.innerHTML += `<td>${player}</td>l`;
        //}
        row.innerHTML = `
            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
            <td>${formatSalary(player.TotalValue)}</td>
            <td>${player.Team}</td>
            <td>${player.Position}</td>
        `;
        tableBody.appendChild(row);
    });
};

async function updateFavorites() {
    if (!verifyLogin()) return;

    const tableHeader = document.querySelector("#favorites thead");
    const tableBody = document.querySelector("#favorites tbody");
    
    let resultObject = await postData("/getWatchlist", {}, token);

    tableHeader.innerHTML = "";
    const headerRow = document.createElement("tr");
    //Object.keys(resultObject.matches[0]).forEach(attribute => {
    //   headerRow.innerHTML += `<td>${attribute}</td>`; 
    //});
    headerRow.innerHTML = `
            <td>Name</td>
            <td>Team</td>
            <td>Position</td>
        `;
    tableHeader.appendChild(headerRow);

    tableBody.innerHTML = "";
    console.log(resultObject.watchlist);
    resultObject.watchlist.forEach(player => {
        const row = document.createElement("tr");

        row.innerHTML = `
            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
            <td>${player.Team}</td>
            <td>${player.Position}</td>
        `;
        tableBody.appendChild(row);
    });
};