import EventEmitter from "eventemitter3";
import image from "../images/planet.svg";

export default class Application extends EventEmitter {
  static get events() {
    return {
      READY: "ready",
    };
  }

  constructor() {
    super();

    this._load();
    this._create();
    this._startLoading();
    this._stopLoading();
    this._loading = document.querySelector('progress');

    const box = document.createElement("div");
    box.classList.add("box");

    //I suppose this is where the values from _load() should be put into _method()
    box.innerHTML = this._render({
      name: 'Placeholder',
      terrain: "placeholder",
      population: 0,
    });

    document.body.querySelector(".main").appendChild(box);

    this.emit(Application.events.READY);
  }

  async _load() {

    //function that gets the data for each planets
    async function getPlanets() {
      const urls = Array.from({ length: 7 },
        (v, i) => `https://swapi.boom.dev/api/planets?page=${i + 1}`);

      const promises = urls.map(url => fetch(url)
        .then(res => res.json())
        .then(data => data.results));

      const planetData = (await Promise.all(promises)).flat();
      console.log('Results:', planetData);

      //arrays where I filter the necessary data from planetData - name, terrain, population
      const names = [];
      const terrain = [];
      const population = [];

      for (let i = 0; i < planetData.length; i++) {
        names.push(planetData[i].name);
        terrain.push(planetData[i].terrain);
        population.push(planetData[i].population);
      }
      console.log(names);
    }
    getPlanets();
  }

  _render({ name, terrain, population }) {
    return `
<article class="media">
  <div class="media-left">
    <figure class="image is-64x64">
      <img src="${image}" alt="planet">
    </figure>
  </div>
  <div class="media-content">
    <div class="content">
    <h4>${name}</h4>
      <p>
        <span class="tag">${terrain}</span> <span class="tag">${population}</span>
        <br>
      </p>
    </div>
  </div>
</article>
    `;
  }

  //here should be moved the rendering of the boxes, I suppose by establishing a connection with _render()
  _create() { }

  // we can leave these two alone for now
  _startLoading() { }

  _stopLoading() { }

}