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

const categoryDropdown = document.getElementById('category-dropdown');
const itemsListTable = document.getElementById('items-list');

class Category {
    constructor(name, getItems, listHeaders, listItem, addItem, submitItem, editItem) {
        this.name = name;
        this.getItems = getItems;
        this.listHeaders = listHeaders;
        this.listItem = listItem;
        this.addItem = addItem;
        this.submitItem = submitItem;
        this.editItem = editItem;
    }
}

const CATEGORIES = [];

CATEGORIES.push(new Category(
    "seasons",
    async function getSeasons() {
        return await Data.getSeasons();
    },
    async function listSeasonHeaders() {
        const headerRow = document.createElement('tr');

        const yearsHeader = document.createElement('th');
        yearsHeader.textContent = "Years";

        headerRow.appendChild(yearsHeader);

        itemsListTable.appendChild(headerRow);
    },
    function listSeason(season, row) {
        const yearCell = document.createElement('td');
        yearCell.textContent = (season.year - 1) + "-" + season.year;
        row.appendChild(yearCell);
    },
    async function addSeason() {
        //
    },
    async function submitSeason() {
        //
    },
    async function editSeason() {

    }
));

CATEGORIES.push(new Category(
    "sports",
    async function getSports() {
        return await Data.getSports();
    },
    async function listSportHeaders() {
        const headerRow = document.createElement('tr');

        const yearsHeader = document.createElement('th');
        yearsHeader.textContent = "Name";
        headerRow.appendChild(yearsHeader);

        itemsListTable.appendChild(headerRow);
    },
    function listSport(sport, row) {
        const nameCell = document.createElement('td');
        nameCell.textContent = sport.name;
        row.appendChild(nameCell);
    },
    async function addSeason() {
        //
    },
    async function submitSeason() {
        //
    },
    async function editSeason() {

    }
));



async function listItems(category) {
    itemsListTable.innerHTML = "";

    const itemsList = await category.getItems();

    await category.listHeaders();

    itemsList.forEach(item => {
        const row = document.createElement('tr');

        category.listItem(item, row);

        const editCell = document.createElement('td');
        const editButton = document.createElement('button');
        editButton.textContent = "edit";
        editCell.appendChild(editButton);
        row.appendChild(editCell);

        const removeCell = document.createElement('td');
        const removeButton = document.createElement('button');
        removeButton.textContent = "remove";
        removeCell.appendChild(removeButton);
        row.appendChild(removeCell);

        itemsListTable.appendChild(row);
    });
}
listItems(CATEGORIES[0]);



categoryDropdown.onchange = () => {
    listItems(CATEGORIES[categoryDropdown.selectedIndex]);
};