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

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

if (!token) {
    window.location.href = "/login";
}

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: 100 }, 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>Rank</td>
            <td>Position</td>
            <td>Name</td>
            <td>Team</td>
            <td>Offense Score</td>
        `;
    offenseHeader.appendChild(headerRow);

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

        row.innerHTML = `
            <td>${i}</td>
            <td>${player.Position}</td>
            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
            <td>${player.Team}</td>
            <td>${Math.floor(player.OffenseScore)}</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: 100 }, 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>Rank</td>
            <td>Position</td>
            <td>Name</td>
            <td>Team</td>
            <td>Paydirt Score</td>
        `;
    paydirtHeader.appendChild(headerRow);

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

        row.innerHTML = `
            <td>${i}</td>
            <td>${player.Position}</td>
            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
            <td>${player.Team}</td>
            <td>${Math.floor(player.PaydirtScore)}</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: 100 }, 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>Rank</td>
            <td>Position</td>
            <td>Name</td>
            <td>Team</td>
            <td>Contract</td>
        `;
    tableHeader.appendChild(headerRow);

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

        //for (attribute in player) {
        //    row.innerHTML += `<td>${player}</td>l`;
        //}
        row.innerHTML = `
            <td>${i}</td>
            <td>${player.Position}</td>
            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
            <td>${player.Team}</td>
            <td>${formatSalary(player.TotalValue)}</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>Rank</td>
            <td>Position</td>
            <td>Name</td>
            <td>Team</td>
            <td>Remove</td>
        `;
    tableHeader.appendChild(headerRow);

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

        row.innerHTML = `
            <td>${i}</td>
            <td>${player.Position}</td>
            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
            <td>${player.Team}</td>
            <td><a href="#" class="remove" data-id="${player.PlayerID}">Stop Watching</a></td>
        `;
        tableBody.appendChild(row);
    });

    document.querySelectorAll(".remove").forEach(element => {
        element.addEventListener("click", async e => {
            postData("/toggleWatched", { id: element.dataset.id }, token);
            element.closest("tr").remove();
        })
    });
};