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

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

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

updateHighest();
updateFavorites();

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);
    });
};