import * as Data from "./../data.js";

const gamesListTable = document.getElementById('games-list');
const addNewButton = document.getElementById('add-new-button');
const manageAccountButton = document.getElementById('manage-account-button');



function getGenderLetter(genderName) {
    return genderName == "female" ? "F" : "M";
}

async function listGameHeaders() {
    const headerRow = document.createElement('tr');

    const teamsHeader = document.createElement('th');
    teamsHeader.textContent = "Teams";
    headerRow.appendChild(teamsHeader);
    
    const scoreHeader = document.createElement('th');
    headerRow.appendChild(scoreHeader);

    const spacerHeader = document.createElement('th');
    spacerHeader.classList.add('spacer-column');
    headerRow.appendChild(spacerHeader);

    const sportNameHeader = document.createElement('th');
    sportNameHeader.textContent = "Sport";
    headerRow.appendChild(sportNameHeader);

    const dateHeader = document.createElement('th');
    dateHeader.textContent = "Date";
    headerRow.appendChild(dateHeader);

    gamesListTable.appendChild(headerRow);
}


function listGame(game, row) {
    const teamsCell = document.createElement('td');
    const team1NameSpan = document.createElement('span');
    Data.getTeam(game.team1ID)
        .then(data => team1NameSpan.textContent = data.name);
    teamsCell.appendChild(team1NameSpan);
    const team2NameSpan = document.createElement('span');
    Data.getTeam(game.team2ID)
        .then(data => team2NameSpan.textContent = data.name);
    teamsCell.appendChild(team2NameSpan);
    row.appendChild(teamsCell);

    const scoresCell = document.createElement('td');
    const team1ScoreSpan = document.createElement('span');
    team1ScoreSpan.textContent = game.team1Score;
    scoresCell.appendChild(team1ScoreSpan);
    const team2ScoreSpan = document.createElement('span');
    team2ScoreSpan.textContent = game.team2Score;
    scoresCell.appendChild(team2ScoreSpan);
    row.appendChild(scoresCell);
    
    const spacerCell = document.createElement('td');
    row.appendChild(spacerCell);

    const sportCell = document.createElement('td');
    const sportSpan = document.createElement('span');
    const divisionSpan = document.createElement('span');
    divisionSpan.classList.add('flat-content');
    const divisionNameSpan = document.createElement('span');
    const divisionGenderSpan = document.createElement('span');
    divisionSpan.appendChild(divisionNameSpan);
    divisionSpan.appendChild(divisionGenderSpan);
    Data.getDivision(game.divisionID)
        .then(data => {
            Data.getSportName(data.sportID)
                .then(data => sportSpan.textContent = data);
            divisionNameSpan.textContent = data.name;
            divisionGenderSpan.textContent = getGenderLetter(data.gender.name);
        });
    sportCell.appendChild(sportSpan);
    sportCell.appendChild(divisionSpan);
    row.appendChild(sportCell);

    const dateCell = document.createElement('td');
    const yearSpan = document.createElement('span');
    yearSpan.textContent = game.date.slice(0,4);
    dateCell.appendChild(yearSpan);
    const dateSpan = document.createElement('span');
    dateSpan.textContent = game.date.slice(5);
    dateCell.appendChild(dateSpan);
    row.appendChild(dateCell);
}

async function addGame() {
    window.location.href = "/manage/game";
}

async function editGame(id) {
    window.location.href = `/manage/game?game=${id}`;
}


async function listItems() {
    const gamesList = await Data.getGamesByUser();

    await listGameHeaders();

    gamesList.forEach(game => {
        const row = document.createElement('tr');

        listGame(game, row);

        const manageCell = document.createElement('td');

        const editSpan = document.createElement('span');
        const editButton = document.createElement('button');
        editButton.textContent = "E";
        editButton.addEventListener('click', () => {
            editGame(game.id);
        });
        editSpan.appendChild(editButton);
        manageCell.appendChild(editSpan);

        row.appendChild(manageCell);

        gamesListTable.appendChild(row);
    });
}
listItems();

addNewButton.addEventListener('click', () => addGame());
manageAccountButton.addEventListener('click', () => {
    window.location.href = '/manage/account';
});