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(0);

document.querySelectorAll("input[type='checkbox']").forEach(checkbox => {
    checkbox.addEventListener("change", e => {
        e.preventDefault();
        updateSearch();
    });
});

document.querySelectorAll("input[type='text']").forEach(checkbox => {
    checkbox.addEventListener("input", e => {
        e.preventDefault();
        updateSearch();
    });
});

if (searchForm)searchForm.onsubmit = e => {
    e.preventDefault();
    updateSearch();
};

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

    const formData = new FormData(searchForm);
    
    let positions = formData.getAll("days");

    while (positions.length !== 4) {
        positions.push("NOPE");
    }
    
    let resultObject = await postData("/getPasswords", {}, token);

    if (resultObject.matches.length === 0) {
       nomatch.style.display = "";
       table.style.display = "none";
       updateTableVisibility(0);
       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>Position</td>
            <td>Name</td>
            <td>Team</td>
            <td>Contract</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>${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);
    });
    updateTableVisibility(resultObject.matches.length);
};

function updateTableVisibility(length) {
    if (!tableBody) return;
    console.log(length);

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