let table = document.getElementsByClassName("table")[0];
let trieCroissant = false;
let dat = ["intRank","strTeamBadge","strTeam","intPlayed","intWin","intDraw","intLoss","intGoalsFor","intGoalsAgainst","intGoalDifference","intPoints"];
let recherche = document.getElementById("myInput");

recherche.addEventListener('input', function(){
    filtrer(recherche.value.toLowerCase());
});

trier();

function viderTable(){
    let listeLigne = table.children;
    let i=0;
    while (listeLigne.length>i){
        if (listeLigne[i].tagName === 'tr'){
            table.removeChild(listeLigne[i]);
        }
        else{
            i++;
        }
    }
}

function remplirTable(donnee=data){
    for (let i=0; i<donnee.length; i++){
        let ligne = createLine(donnee[i]);
        table.appendChild(ligne);
    };
}


function createLine(ligne){
	let resultat = document.createElement("tr");
	for(let i=0; i<dat.length; i++){
		let colonne = document.createElement("th");
		let contenu;
		if (dat[i]==="strTeamBadge"){
			contenu = document.createElement("img");
			contenu.src = ligne[dat[i]];
		}
		else{
			contenu = document.createTextNode(ligne[dat[i]]);
		}
		colonne.appendChild(contenu);
		resultat.appendChild(colonne);
	}
	return resultat;
}

function trier(){
    trieCroissant = !trieCroissant;
    if (trieCroissant === true){
        data.sort((a,b)=>a.intRank - b.intRank);    
    }
    else{
        data.sort((a,b)=>b.intRank - a.intRank);
    }
    viderTable();
    remplirTable();
}

function filtrer(filtre){
    viderTable();
    let dataFiltrer = data.filter(function(equipe){
        if (equipe.strTeam.toLowerCase().startsWith(filtre)){
            return equipe;
        }
    });
    remplirTable(dataFiltrer);
}