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


const sportDropdown = document.getElementById('sport-dropdown');
const seasonDropdown = document.getElementById('year-dropdown');
const genderDropdown = document.getElementById('gender-dropdown');
const divisionDropdown = document.getElementById('division-dropdown');
const team1Dropdown = document.getElementById('team1-dropdown');
const team2Dropdown = document.getElementById('team2-dropdown');





async function listSeasons() {
    seasonDropdown.innerHTML = "";
    
    const seasonsList = await Data.getSeasons();

    seasonsList.forEach(season => {
        const option = document.createElement('option');
        option.text = (season.year - 1) + "-" + season.year;
        option.value = season.id;
        seasonDropdown.appendChild(option);
    });
}
listSeasons();

async function listSports() {
    sportDropdown.innerHTML = "";

    const sportsList = await Data.getSports();
    
    sportsList.forEach(sport => {
        const option = document.createElement('option');
        option.text = sport.name;
        option.value = sport.id;
        sportDropdown.appendChild(option);
    });
    
    listGenders();
    listTeams();
}
listSports();

async function listGenders() {
    genderDropdown.innerHTML = "";

    const selectedSportID = sportDropdown.value;
    const gendersList = await Data.getGenders(selectedSportID);

    if(selectedSportID) {
        gendersList.forEach(gender => {
            const option = document.createElement('option');
            option.text = (gender.name == "female") ? "Female" : (gender.name == "male") ? "Male" : "";
            option.value = gender.name;
            genderDropdown.appendChild(option);
        });
    }

    listDivisions();
}

async function listDivisions() {
    divisionDropdown.innerHTML = "";

    const selectedSportID = sportDropdown.value;
    const selectedGender = genderDropdown.value;

    if(selectedGender) {
        const divisionsList = await Data.getDivisions(selectedSportID, selectedGender);

        divisionsList.forEach(division => {
            const option = document.createElement('option');
            option.text = division.name;
            option.value = division.id;
            divisionDropdown.appendChild(option);
        });
    }
}

async function listTeams() {
    team1Dropdown.innerHTML = "";
    team2Dropdown.innerHTML = "";

    const selectedSportID = sportDropdown.value;

    if(selectedSportID) {
        const teamsList = await Data.getTeams(selectedSportID);

        teamsList.forEach(team => {
            const optionT1 = document.createElement('option');
            optionT1.text = team.name;
            optionT1.value = team.id;
            team1Dropdown.appendChild(optionT1);

            const optionT2 = document.createElement('option');
            optionT2.text = team.name;
            optionT2.value = team.id;
            team2Dropdown.appendChild(optionT2);
        });
    }
}





sportDropdown.onchange = (() => { 
    listGenders();
    listTeams();
});
genderDropdown.onchange = listDivisions;