let talentnb = 0;
    /** Création de la box du pokemon */
    let data = localStorage.getItem("oui").split(',');
    //Nom du pokemon
    let pokemon = data[0];
    //Numéro du pokedex
    let number = data[3];
     
     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 == ""){
            type2.style.display = "none";
        }
        else{
            type2.src = src2;
        }


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

        return typeBox;

    }

    function get(that) {

        return fetch(that)
        .then(response => response.json())
        .catch(error => console.error(error));

    }


    function choiceAbility(ability,choice,abilities){
        ability.ondblclick = function(){

            if(choice.childNodes.length < 4){
                selectedAbility(ability,choice,abilities);
                choice.appendChild(ability);
                choice.style.display = "block";
            }
            if(choice.childNodes.length == 4){

                let add = document.createElement("button");
                add.innerHTML = "Add to Cart";

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

                add.onclick = function(){

                    let talent = document.getElementsByClassName("talent")[0].children[0].children[0].innerHTML;
                    let attack1 = choice.children[0].children[2].innerHTML;
                    let attack2 = choice.children[1].children[2].innerHTML;
                    let attack3 = choice.children[2].children[2].innerHTML;
                    let attack4 = choice.children[3].children[2].innerHTML;
        
                    newData = [pokemon,number,data[1],data[1],attack1,attack2,attack3,attack4,talent];
        
                    localStorage.setItem(pokemon,newData);
                    document.getElementById("sac");
        
                    for(let i = 0; i<localStorage.length; i++){
                        console.log(localStorage.getItem(localStorage.key(i)));
                    }
        
                    after.innerHTML = localStorage.length-1;
                    sac.after(after);
                    window.location.href = "shop.html";
        
                }

                document.getElementsByClassName("box")[0].appendChild(add);
                

            }
            
        }
    }


    function selectedAbility(ability,choice,abilities){
        ability.ondblclick = function(){

            choiceAbility(ability,choice,abilities);
            abilities.appendChild(ability);
            if(choice.childNodes.length < 1){
                choice.style.display = "none";
            }

        }
    }

    function getMoves(infos,stat,description,abilities,selection,choice){

        selection.then(data =>{

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

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

                let txt = document.createElement("p");
                txt.innerHTML = data.moves[i].move.name;

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

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

                get(data.moves[i].move.url).then(move => {
                    type.src = "img/types/" + move.type.name +".png";
                    dmgclass.src = "img/types/" + move.damage_class.name + ".png";

                    ability.onclick = function(){

                        infos.children[0].src = type.src;
                        infos.children[0].className = "type";
                        infos.children[1].src = dmgclass.src;
                        infos.children[1].className = "dmgclass";
                        

                        description.innerHTML = move.effect_entries[0].effect;
                        stat.innerHTML = "PP: " + move.pp + " - Power: " + move.power + " - Accuracy: " + move.accuracy;

                        infos.appendChild(stat);

                    }
                })

                ability.appendChild(type);
                ability.appendChild(dmgclass);
                ability.appendChild(txt);


                choiceAbility(ability,choice,abilities);
                abilities.appendChild(ability);
            }
        });
    }


    function getFirstMove(infos,stat,description,pokemon){

        pokemon.then(data =>{

            get(data.moves[0].move.url).then(move => {

                infos.children[0].src = "img/types/" + move.type.name +".png";
                infos.children[0].className = "type";
                infos.children[1].src = "img/types/" + move.damage_class.name + ".png";
                infos.children[1].className = "dmgclass";

                description.innerHTML = move.effect_entries[0].effect;
                stat.innerHTML = "PP: " + move.pp + " - Power: " + move.power + " - Accuracy: " + move.accuracy;
                infos.appendChild(stat);

            });
        });
    }



    function getTalent(talent,pokemon){

        let title = document.createElement("div");
        title.className = "infos";


        let leftArrow = document.createElement("i");
        leftArrow.className = "arrow left";

        let rightArrow = document.createElement("i");
        rightArrow.className = "arrow right";

        let name = document.createElement("p");


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

        pokemon.then(data =>{

            if(data.abilities.length > 1){


                leftArrow.onclick = function() {
                    if(talentnb > 0){
                        talentnb -= 1;
                        name.innerHTML = "Talent: " + data.abilities[talentnb].ability.name;   
            
                        get(data.abilities[talentnb].ability.url).then(ability => {
                            text.innerHTML = ability.effect_entries[1].effect;
                        });

                        title.appendChild(name);
                        title.appendChild(leftArrow);
                        title.appendChild(rightArrow);
                    }
                }

                rightArrow.onclick = function() {
                    if(talentnb < data.abilities.length-1){
                        talentnb += 1;
                        name.innerHTML = "Talent: " + data.abilities[talentnb].ability.name;   
            
                        get(data.abilities[talentnb].ability.url).then(ability => {
                            text.innerHTML = ability.effect_entries[1].effect;
                        });
                    }

                    title.appendChild(name);
                    title.appendChild(leftArrow);
                    title.appendChild(rightArrow);
                }
            }

            name.innerHTML = "Talent: " + data.abilities[0].ability.name;   
            
            get(data.abilities[0].ability.url).then(ability => {
                text.innerHTML = ability.effect_entries[1].effect;
            });

            title.appendChild(name);
            title.appendChild(leftArrow);
            title.appendChild(rightArrow);
            
        });

        talent.appendChild(title);
        talent.appendChild(text);

    }




    function addToDescription(description,infos,text){
        description.appendChild(infos);
        description.appendChild(text);
    }

    function addToDescAndTalent(descAndTalent,description,talent){
        descAndTalent.appendChild(description);
        descAndTalent.appendChild(talent);
    }


    function addToContainer(container,abilities,descAndTalent){
        container.appendChild(abilities);
        container.appendChild(descAndTalent);
    }

    


    function displayOfAbilities(main,selection,choice){

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

        let descAndTalent = document.createElement("div");
        descAndTalent.className = "container2";

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


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

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


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

        infos.appendChild(document.createElement("img"));
        infos.appendChild(document.createElement("img"));

        let stats = document.createElement("p");
        let text = document.createElement("p");
        text.className = "text";
        
        getFirstMove(infos,stats,text,selection);
        getMoves(infos,stats,text,abilities,selection,choice);
        getTalent(talent,selection);

        addToDescription(description,infos,text);
        addToDescAndTalent(descAndTalent,description,talent);
        addToContainer(container,abilities,descAndTalent);
        
        main.appendChild(container);
    }




    

    function gotSelect(){

        

        console.log(data);
        let main = document.getElementById("selected");
        let selection = get("https://pokeapi.co/api/v2/pokemon/" + pokemon);
        
        
        let box = document.createElement("div");
        box.className = "box";

        let link = document.createElement("a");
        link.className = "gif";
        link.href = "http://pokemondb.net/pokedex/" + pokemon;

        let img = document.createElement("img");
        img.id = "select";
        img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png";
        img.alt = pokemon;

        let button = document.createElement("button");
        button.className = "btn-5";
        
        let span = document.createElement("span");
        span.innerHTML = "Shiny";

        button.appendChild(span);


        button.onclick = function(){

            if(img.src == "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png"){
                img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/" + number + ".png";
                button.className = "btn-2";

            }
            else{
                img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + number + ".png"
                button.className = "btn-5";
            } 
        }

        link.appendChild(img);
        


        let name = document.createElement("p");
        name.className = "names";
        name.innerHTML = pokemon;


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

        
        
        box.appendChild(link);
        box.appendChild(typeBox(data[1],data[2]));
        box.appendChild(name);
        box.appendChild(button);
        box.appendChild(choice);
        
        main.appendChild(box);


        /** Création des box des capacités */
        displayOfAbilities(main,selection,choice);


        
        
    }

    gotSelect();