const tymDiv = document.getElementById("tym");
const btnGeneruj = document.getElementById("btnGeneruj");
const btnUloz = document.getElementById("btnUloz")

let aktualniTym = [];

async function nactiPokemona(id) {
    const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
    const response = await fetch(url);
    const data = response.json();
    return data
}
async function zobrazTym(seznamID) {
    tymDiv.innerHTML = "";
    aktualniTym = seznamID;
    for (const id of seznamID){
        const poke = await nactiPokemona(id);
        const div = document.createElement("div");
        div.innerHTML= `
            <img src="${poke.sprites.other["official-artwork"].front_default}" 
                alt="${poke.name}" width="100"
            >
            <h3>${poke.name}</h3>
            <p>ID: #${poke.id}</p>
            <hr>
            `;
        tymDiv.appendChild(div);
    }
}

function vygenerujNahodnaID() {
    let ids= [];
    for (let i = 0; i<6;i++){
        const nahoda = Math.floor(Math.random()*151)+1;
        ids.push(nahoda);
    }
    zobrazTym(ids);
}

btnGeneruj.addEventListener("click",vygenerujNahodnaID)

btnUloz.addEventListener("click",() => {
    localStorage.setItem("moje_pokemony",JSON.stringify(aktualniTym));
    alert("Tým uložen do prohlížeče");
});

function nactiUlozenyTym() {
    const ulozeno = localStorage.getItem("moje_pokemony");
    if (ulozeno){
        zobrazTym(JSON.parse(ulozeno));
    }
}
nactiUlozenyTym();