const pokeUrlApi = 'https://pokeapi.co/api/v2/';
const getAllPokemonsApi = async () => {
    return fetch(`${pokeUrlApi}pokemon?offset=0&limit=10`)
        .then((response) => response.json())
        .then((data) => {
            return data.results.map((pokemon) => {
                return {
                    id: pokemon.url.split('/')[6],
                    name: pokemon.name,
                    img: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.url.split('/')[6]}.png`,
                }
            })
        })
}

function createListHtml(elements){
    const list = document.createElement('ul');

    elements.forEach((element) => {
        const listItem = document.createElement('li');
        listItem.classList.add('pokemon-item');
        listItem.textContent = element.name;

        listItem.addEventListener('click', async () => {
            const existingDetails = listItem.querySelector('div');
            if (existingDetails) {
                existingDetails.remove();
                return;
            }

            const pokeData = await loadPokemonDatas(element.name);
            const details = document.createElement('div');
            details.innerHTML = `
                <h3>${pokeData.name} (#${pokeData.id})</h3>
                <img src="${pokeData.img}" alt="${pokeData.name}">
                <p>Height: ${pokeData.height / 10} m</p>
                <p>Weight: ${pokeData.weight / 10} kg</p>
                <p>Types: ${pokeData.types}</p>
            `;
            listItem.appendChild(details);
            details.style.display = 'block';
        });

        list.appendChild(listItem);
    });

    document.querySelector('body').appendChild(list);
}

function loadPokemonDatas(name) {
    if (!name) {
        console.error('No Pokémon name provided');
        return Promise.reject('No Pokémon name provided');
    }
    return fetch(`${pokeUrlApi}pokemon/${name}`)
        .then((response) => response.json())
        .then((data) => {
            console.log(data);
            return {
                id: data.id,
                name: data.name,
                img: data.sprites.front_default,
                height: data.height,
                weight: data.weight,
                types: data.types.map(typeInfo => typeInfo.type.name).join(', '),
                displayed: false
            }
        });
}

document.addEventListener('DOMContentLoaded', async () => {
    var divLoading = document.querySelector('#loader');

    try{
        const pokeapi = await getAllPokemonsApi();

        if(pokeapi) {
            createListHtml(pokeapi);
            divLoading.style.display = 'none';
        }
    } catch (error) {
        console.error('Error fetching Pokémon data:', error);
        divLoading.style.display = 'none';
        const errorElement = document.createElement('p');
        errorElement.textContent = 'Failed to load Pokémon data.';
        document.querySelector('#pokemons').appendChild(errorElement);
    }
});