let publicKey = "ceb9db9f7dab22d3e21c5f48ce074034";
let privatKey = "e3aa3bfbb0d969f8550b0c43cf2d2238ea535bf9";
let baseUrl = "https://gateway.marvel.com:443/v1/public/characters?nameStartsWith=";
let timestamp = 1;
//valeur en hasd md5 demandé par l'api
let hashmd5 = md5(timestamp + privatKey + publicKey);

//Url avec la requete fonctionelle de base 
//https://gateway.marvel.com/v1/public/characters?ts=1&apikey=ceb9db9f7dab22d3e21c5f48ce074034&hash=ddd431394cf1912ff23a7cd59be524fd

/**
 * Recoit une valeur dans la searchBar et l'applique au URL pour faire la requete dans l'api. Appele par après la fonction afficheHero qui nous permet d'afficher les heors.
 */
function requete() {
    //mise a 0 des cards 
    let herosSection = document.querySelector(".wrapper");
    herosSection.innerHTML = "";
    //Valeur dans la searche box
    let input = document.getElementById("searchBarInput").value;
    fetch(baseUrl + input + "&ts=1&apikey=ceb9db9f7dab22d3e21c5f48ce074034&hash=ddd431394cf1912ff23a7cd59be524fd").then(function (response) {
        if (response.status !== 200) {
            console.log("Looks like there was a problem. Status Code: " + response.status);
            return;
        }
        response.json().then(function (data) {
            afficheHeros(data);
        });
    }).catch(function (err) { console.log("Fetch Error :-S", err); });
}

function afficheHeros(data) {
    let herosArray = data.data.results;
    for (let hero of herosArray) {
        let heroName = hero.name;
        let heroDescription = hero.description;
        let heroImage = hero.thumbnail.path + "." + hero.thumbnail.extension;
        document.createElement('div');
        let heroCard = `<div class='card'><img src="${heroImage}"/><div class='info'><h1>${heroName}</h1><p>${heroDescription}</p></div></div>`;
        document.querySelector(".wrapper").innerHTML += heroCard;
    }
}

