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


const submissionForm = document.getElementById('submission-form');
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 dateInput = document.getElementById('date-input');
const team1Dropdown = document.getElementById('team1-dropdown');
const team2Dropdown = document.getElementById('team2-dropdown');
const team1ScoreTextbox = document.getElementById('team1-score-textbox');
const team2ScoreTextbox = document.getElementById('team2-score-textbox');
const nameTextbox = document.getElementById('name-textbox');
const submitButton = document.getElementById('submit-button');
const deleteButton = document.getElementById('delete-button');
const loadingSpan = document.getElementById('loading-span');


async function initializeForm() {
    let params = new URLSearchParams(location.search);
    let gameID = params.get('game');
    if(gameID) {
        deleteButton.style.visibility = "visible";
        deleteButton.disabled = false;

        const game = await Data.getGame(gameID);

        Form.addHiddenValue('game', gameID, submissionForm);

        Form.populateSeasons(seasonDropdown, game.seasonID);
        const data = await Data.getDivision(game.divisionID)
        await Form.populateSports(sportDropdown, data.sportID)
        await Form.populateGenders(genderDropdown, sportDropdown.value, data.gender.name)
        await Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value, game.divisionID);
        await Form.populateTeams(team1Dropdown, sportDropdown.value, game.team1ID);
        await Form.populateTeams(team2Dropdown, sportDropdown.value, game.team2ID);

        dateInput.value = game.date;
        team1ScoreTextbox.value = game.team1Score;
        team2ScoreTextbox.value = game.team2Score;
    }
    else {
        /*try {*/
            const data = await (await fetch(`/fetch/index/dropdown`)).json();

            await Form.populateSeasons(seasonDropdown, null, data);
            await Form.populateSports(sportDropdown, null, data);
            await Form.populateGenders(genderDropdown, null, null, data);
            await Form.populateDivisions(divisionDropdown, null, null, null, data);
            await Form.populateTeams(team1Dropdown, null, null, data);
            await Form.populateTeams(team2Dropdown, null, null, data, true);    
        /*} catch {
            await Form.populateSeasons(seasonDropdown);
            await Form.populateSports(sportDropdown)
            await Form.populateGenders(genderDropdown, sportDropdown.value)
            await Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value);
            await Form.populateTeams(team1Dropdown, sportDropdown.value);
            await Form.populateTeams(team2Dropdown, sportDropdown.value);    
        }*/

        dateInput.value = (new Date()).toISOString().slice(0,10);
    }
    seasonDropdown.disabled = false;
    sportDropdown.disabled = false;
    genderDropdown.disabled = false;
    divisionDropdown.disabled = false;
    dateInput.disabled = false;
    team1Dropdown.disabled = false;
    team2Dropdown.disabled = false;
    team1ScoreTextbox.disabled = false;
    team2ScoreTextbox.disabled = false;
    if(nameTextbox) {
        nameTextbox.disabled = false;
    }
    
    sportDropdown.onchange = async () => {
        await Form.populateGenders(genderDropdown, sportDropdown.value)
        await Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value);
        await Form.populateTeams(team1Dropdown, sportDropdown.value);
        await Form.populateTeams(team2Dropdown, sportDropdown.value);
        checkDataValidity();
    };

    genderDropdown.onchange = async () => {
        await Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value);
        checkDataValidity();
    };

    dateInput.addEventListener('keyup', checkDataValidity);
    team1Dropdown.onchange = checkDataValidity;
    team1ScoreTextbox.addEventListener('keyup', checkDataValidity);
    team2Dropdown.onchange = checkDataValidity;
    team2ScoreTextbox.addEventListener('keyup', checkDataValidity);
    if(nameTextbox) nameTextbox.addEventListener('keyup', checkDataValidity);

    loadingSpan.textContent = '';
    submissionForm.style.visibility = 'visible';

    checkDataValidity();
}
initializeForm();

async function checkDataValidity() {
    let dataIsValid = true;

    const seasonHasContent = seasonDropdown.options.length;
    const sportHasContent = sportDropdown.options.length;
    const genderHasContent = genderDropdown.options.length;
    const divisionHasContent = divisionDropdown.options.length;
    const team1HasContent = team1Dropdown.options.length;
    const team2HasContent = team2Dropdown.options.length;

    if(!seasonHasContent || !sportHasContent || !genderHasContent || !divisionHasContent || !team1HasContent || !team2HasContent) dataIsValid = false;

    if(team1Dropdown.selectedIndex == team2Dropdown.selectedIndex) dataIsValid = false;

    if(team1ScoreTextbox.value == "" || team2ScoreTextbox.value == "") dataIsValid = false;

    if(dateInput.value == "") dataIsValid = false;

    if(nameTextbox && nameTextbox.value == "") dataIsValid = false;

    submitButton.disabled = !dataIsValid;
}

Form.addRemoveFunction(deleteButton, submissionForm, "game");