import { postData, verifyLogin } from "./client.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("https://project.rochesterx.dev/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>`; 
    })
    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.player_id}</td>
            <td>${player.player_name}</td>
            <td>${formatSalary(player.salary)}</td>
            <td>${player.team_name}</td>
            <td>${player.position}</td>
        `;
        tableBody.appendChild(row);
    });
    updateTableVisibility();
};

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

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

function formatText(text) {
    if (text == null) return "—";

    if (typeof(text) === "string") {
        return text;
    }
    else {
        return "Unknown format";
    }
}
function formatSalary(text) {
    if (text == null) return "—";

    try {
        var millions = (parseInt(text, 10) / 1000000).toFixed(2);
        return `$${millions} million`;
    } catch (e) {
        return "Unknown format"
    }
    
}
function formatDate(date) {
    if (date == null) return "—";

    if (typeof(date) === "string") {
        return date.split("T")[0];
    }
    else {
        return "Unknown format";
    }
}
function formatDateTime(date) {
    if (date == null) return "—";

    if (typeof(date) === "string") {
        return date.split("T")[0] + " at " + date.split("T")[1].split(".")[0];
    }
    else {
        return "Unknown format";
    }
}