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

const watchButton = document.querySelector("#watch");

//const watchlist = await postData("/getWatchlist", {}, token);

populatePlayerData();
updateIsWatched();

watchButton.onclick = async e => {
    e.preventDefault();

    const [, , id] = window.location.pathname.split("/");
    const resultObject = await postData("/toggleWatched", { id: id }, token);
    alert(resultObject.message);
    updateIsWatched();
}

async function updateIsWatched() {
    const [, , id] = window.location.pathname.split("/");
    const resultObject = await postData("/isWatched", {id: id}, token);
    const isWatched = resultObject.isWatched;
    watchButton.innerHTML = isWatched ? "Stop Watching Player" : "Watch Player";
}

async function populatePlayerData() {
    const [, , id] = window.location.pathname.split("/");
    const result = await postData("/getPlayer", { id: id }, window.localStorage.getItem("token"));
    if (result.success === false) {
        console.log("Invalid ID");
        window.location.href = "/search";
        return;
    }

    const player = result.match;
    for (const [attribute, value] of Object.entries(player)) {
        console.log(`.attribute-${attribute}`);
        document.querySelectorAll(`.attribute-${attribute}`).forEach(element => {
            if (element.classList.contains("format-salary")) {
                element.textContent = formatSalary(value);
                return;
            }
            element.textContent = value;
        })
    };

    console.log(player);
}