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

const searchForm = document.getElementById("searchForm");

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

const tableHeader = document.getElementById("header");
const tableBody = document.getElementById("results");
const table = document.getElementById("table");
const nomatch = document.getElementById("nomatch");

updateTableVisibility();

if (searchForm)searchForm.onsubmit = async e => {
    e.preventDefault();
    if (!verifyLogin()) return;
    
    let resultObject = await postData("/getPlayers", {
        player: document.getElementById("query").value
    }, token);

    if (resultObject.matches.length === 0) {
       nomatch.style.display = "";
       table.style.display = "none";
       return;
    }
    nomatch.style.display = "none"
    table.style.display = "";
    tableHeader.innerHTML = "";
    const headerRow = document.createElement("tr")
    //Object.keys(resultObject.matches[0]).forEach(attribute => {
    //   headerRow.innerHTML += `<td>${attribute}</td>`; 
    //});
    headerRow.innerHTML += `
            <td>ID</td>
            <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");
        console.log(player);

        //for (attribute in player) {
        //    row.innerHTML += `<td>${player}</td>l`;
        //}
        row.innerHTML = `
            <td>${player.PlayerID}</td>
            <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);
    });
    updateTableVisibility();
};

function updateTableVisibility() {
    if (!tableBody) return;

    const rows = tableBody.querySelectorAll("tr");
    if (rows == null) return;
    if (rows.length != 0) {
        table.style.display = "";
    } else {
        table.style.display = "none";
    }
}