//Créer une type qui contient 2 img de types pokemons
function typeBox(src1,src2){

    var typeBox = document.createElement("div");
    typeBox.className = "typebox"


    var type1 = document.createElement("img");
    var type2 = document.createElement("img");
    type1.className = "type";
    type2.className = "type";

    type1.src = src1;

    if(src2 == ""){
        //si le pokemon n'a qu'un seul type on n'affiche rien pour la 2em image
        type2.style.display = "none";
    }
    else{
        type2.src = src2;
    }


    typeBox.appendChild(type1);
    typeBox.appendChild(type2);

    return typeBox;

}


//Créer une croix à l'article qui permet de le supprimer de la liste des articles dans le sac et dans le storage
function toDeleteArticle(poke,name){
    let x = document.createElement("img");
    x.className = "x";
    x.src ="img/x.png";
    x.style.cursor = "pointer";

    x.onclick = function(){

        poke.remove()
        localStorage.removeItem(name);
        document.getElementById("number").innerHTML = localStorage.length-1;

    }

    return x;
}


//Créer un article
function createArticle(name,number,type1,type2,attacks,talent,shiny){

    let container = document.getElementById("container");

    let pokemon = document.createElement("div");
    pokemon.className = "pokemon";

    let img = document.createElement("img");

    let price = document.createElement("p");
    price.className = "price";

    //On change le sprite du pokemon si il est shiny
    if(shiny == 1){
        img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/" + number + ".png";
        price.innerHTML = "4.00 CHF";
    }
    else{
        img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png";
        price.innerHTML = "2.00 CHF";
    }

    img.style.width = "8vw";
    img.style.height ="8vw";

    let typeAndName = document.createElement("div");
    typeAndName.className = "typeAndName";
    
    let pokname = document.createElement("p");
    pokname.innerHTML = name;

    let typebox = typeBox(type1,type2);

    //Champ attack pour préciser quels sont les attaques
    let title = document.createElement("p");
    title.className = "name";
    title.innerHTML = "Attacks:";

    //Pareil pour le talent
    let talentName = document.createElement("p");
    talentName.className = "text";
    talentName.innerHTML = talent;
    
    let x = toDeleteArticle(pokemon,name);

    typeAndName.appendChild(pokname);
    typeAndName.appendChild(typebox);

    pokemon.appendChild(x);
    pokemon.appendChild(img);
    pokemon.appendChild(typeAndName);
    pokemon.appendChild(title);

    //Box contenant les attaques afin de mieux les visualiser 
    let box = document.createElement("div");
    box.className = "attackbox";

    for(let i = 0; i<attacks.length; i++){

        let attack = document.createElement("p");
        attack.className = "text";
        attack.innerHTML = attacks[i];
        box.appendChild(attack);

    }

    pokemon.appendChild(box);
    pokemon.appendChild(talentName)
    pokemon.appendChild(price);
    

    container.appendChild(pokemon);

}


//Permet de récupérer un élément dans le storage par rapport à son index 
function getItem(index){
    return localStorage.getItem(localStorage.key(index));
}



//On affiche le nombre d'article actuellement dans le sac
document.getElementById("number").innerHTML = localStorage.length-1;

for(let i = 0; i<localStorage.length; i++){

    //On ignore la clef oui qui une clef supplémentaire destiné à une autre utilisation
    if(localStorage.key(i)=="oui"){
        continue
    }
    else{

        let data = getItem(i).split(',');
        console.log(data[9]);
        let attacks = [data[4],data[5],data[6],data[7]];
        createArticle(data[0],data[1],data[2],data[3],attacks,data[8],data[9])

    }

   

}