import { api_call, API_URL, createPagination, api_call_array } from "./util";


const planetes = document.getElementById("resultats");


function remplissage(results) {

    planetes.innerHTML = "";

    const previousUrl = results.previous;
    const nextUrl = results.next;
    const tabResults = results.results;

    planetsItems = [];
    residentsArray = [];
    filmsArray = [];

    for (resultPlanet of tabResults) {
        const nom = resultPlanet.name;
        const diametre = resultPlanet.diameter;
        const climate = resultPlanet.climate;
        const terrain = resultPlanet.terrain;
        const population = resultPlanet.population;

        const tabResidents = resultPlanet.residents;
        const tabFilms = resultPlanet.films;
        residentsArray.push(tabResidents);
        filmsArray.push(tabFilms);


        planetes.innerHTML +=
            `<section class="resultat accordeon_item">
            <h1 class="accordeon_item_header">${nom}</h1>
            <div class="accordeon_item_body">
                <div class="column1">
                    <p>${terrain}</p>
                    <p>${climate}</p>
                    <p>${diametre}Km</p>
                </div>
                <div class="column2">${tabResidents}</div>
                <div class="column3">${tabFilms}</div>
            </div>
        </section>`;

        const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
        console.log(accordeonItemHeader[accordeonItemHeader.length - 1]);
        accordeonItemHeader[accordeonItemHeader.length - 1].addEventListener("click", function (event) {
            console.log(`click on `);
            console.log(event.target);
            accordeonItemHeader[accordeonItemHeader.length - 1].classList.toggle("active");
            // api_call_array(residentsArray[index], fillDetails);
            // api_call_array(filmsArray[index], fillDetails);
        });
    }
    // item = accordeonItemHeader[accordeonItemHeader.length - 1];
    // planetsItems.push(item);





    //Pagination
    createPagination(previousUrl, nextUrl, planetes, remplissage);


    // for(index in planetsItems){
    //     console.log(planetsItems[index]);
    //     planetsItems[index].addEventListener("click", function(event){
    //         console.log(`click on ${event.target}`);
    //         planetsItems[index].classList.toggle("active");
    //         // api_call_array(residentsArray[index], fillDetails);
    //         // api_call_array(filmsArray[index], fillDetails);
    //     });
    // }
    // const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
    // accordeonItemHeader.forEach(accordeonItemHeader => {
    //     accordeonItemHeader.addEventListener("click", event => {
    //         accordeonItemHeader.classList.toggle("active");
    //         api_call_array(tabResidents, fillDetails);
    //         api_call_array(tabFilms, fillDetails);
    //     });
    // });

}

const fillResidents = (jsonResp) => {
    console.log(jsonResp);
}

const fillFilms = (jsonResp) => {
    console.log(jsonResp);
}


api_call(API_URL + "/planets", remplissage);


console.log('planet.js loaded');