<script lang="ts">
  // interface PokemonsJson {
  //   count: number;
  //   next?: string;
  //   previous?: string;
  //   results: [{ name: string; url: string }];
  // }
  const getPokemons = async () /*: Promise<PokemonsJson>*/ => {
    const ps = await fetch("https://pokeapi.co/api/v2/pokemon?limit=100").then(
      (res) => res.json()
    );
    console.log(ps);
    const pokemons = [];
    for (const poke of ps.results) {
      const name = poke.name;
      const pokeData = await fetch(
        "https://pokeapi.co/api/v2/pokemon/" + name
      ).then((res) => res.json());

      console.log();
      pokemons.push({ name, pokeData });
    }
    return pokemons;
  };

  let pokemonName = "";
  function filterPokemons(pokemons, pokeName /*: { name: string }[]*/) {
    return pokemons.filter((p) => p.name.includes(pokeName));
  }
</script>

<section class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-col text-center w-full mb-20">
      <h2
        class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1"
      >
        I ❤️ SERIES
      </h2>
      <h1
        class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900"
      >
        List of pokemons
      </h1>
      <p class="lg:w-2/3 mx-auto leading-relaxed text-base">
        Data is taken from pokeapi.co, so they are the one to blame for any
        errors
      </p>
    </div>
    <div class="w-full flex justify-center flex-col items-center">
      <label
        for="name"
        class="leading-7 text-lg text-gray-600 flex justify-center items-center mr-3"
        >Name of pokemon to find</label
      >
      <input
        type="text"
        id="name"
        name="name"
        bind:value={pokemonName}
        class="w-3/5 bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
      />
    </div>
    <div class="flex flex-wrap justify-center">
      {#await getPokemons()}
        <h1>Downolading pokemons</h1>
      {:then pokemons}
        {#each filterPokemons(pokemons, pokemonName) as pokemon}
          <div class="m-5">
            <img
              src={pokemon.pokeData.sprites.back_default}
              width="250"
              alt="{pokemon.name} image"
            />
            <p class="text-4xl text-black text-center mt-3">{pokemon.name}</p>
          </div>
        {/each}
      {/await}

      <!--   <div -->
      <!--     class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
      <!--   > -->
      <!--     <h2 -->
      <!--       class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
      <!--     > -->
      <!--       Shooting Stars -->
      <!--     </h2> -->
      <!--     <p class="leading-relaxed text-base mb-4"> -->
      <!--       Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
      <!--       hexagon disrupt edison bulbche. -->
      <!--     </p> -->
      <!--     <a class="text-indigo-500 inline-flex items-center" -->
      <!--       >Learn More -->
      <!--       <svg -->
      <!--         fill="none" -->
      <!--         stroke="currentColor" -->
      <!--         stroke-linecap="round" -->
      <!--         stroke-linejoin="round" -->
      <!--         stroke-width="2" -->
      <!--         class="w-4 h-4 ml-2" -->
      <!--         viewBox="0 0 24 24" -->
      <!--       > -->
      <!--         <path d="M5 12h14M12 5l7 7-7 7" /> -->
      <!--       </svg> -->
      <!--     </a> -->
      <!--   </div> -->
      <!--   <div -->
      <!--     class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
      <!--   > -->
      <!--     <h2 -->
      <!--       class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
      <!--     > -->
      <!--       The Catalyzer -->
      <!--     </h2> -->
      <!--     <p class="leading-relaxed text-base mb-4"> -->
      <!--       Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
      <!--       hexagon disrupt edison bulbche. -->
      <!--     </p> -->
      <!--     <a class="text-indigo-500 inline-flex items-center" -->
      <!--       >Learn More -->
      <!--       <svg -->
      <!--         fill="none" -->
      <!--         stroke="currentColor" -->
      <!--         stroke-linecap="round" -->
      <!--         stroke-linejoin="round" -->
      <!--         stroke-width="2" -->
      <!--         class="w-4 h-4 ml-2" -->
      <!--         viewBox="0 0 24 24" -->
      <!--       > -->
      <!--         <path d="M5 12h14M12 5l7 7-7 7" /> -->
      <!--       </svg> -->
      <!--     </a> -->
      <!--   </div> -->
      <!--   <div -->
      <!--     class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
      <!--   > -->
      <!--     <h2 -->
      <!--       class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
      <!--     > -->
      <!--       Neptune -->
      <!--     </h2> -->
      <!--     <p class="leading-relaxed text-base mb-4"> -->
      <!--       Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
      <!--       hexagon disrupt edison bulbche. -->
      <!--     </p> -->
      <!--     <a class="text-indigo-500 inline-flex items-center" -->
      <!--       >Learn More -->
      <!--       <svg -->
      <!--         fill="none" -->
      <!--         stroke="currentColor" -->
      <!--         stroke-linecap="round" -->
      <!--         stroke-linejoin="round" -->
      <!--         stroke-width="2" -->
      <!--         class="w-4 h-4 ml-2" -->
      <!--         viewBox="0 0 24 24" -->
      <!--       > -->
      <!--         <path d="M5 12h14M12 5l7 7-7 7" /> -->
      <!--       </svg> -->
      <!--     </a> -->
      <!--   </div> -->
      <!--   <div -->
      <!--     class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
      <!--   > -->
      <!--     <h2 -->
      <!--       class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
      <!--     > -->
      <!--       Melanchole -->
      <!--     </h2> -->
      <!--     <p class="leading-relaxed text-base mb-4"> -->
      <!--       Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
      <!--       hexagon disrupt edison bulbche. -->
      <!--     </p> -->
      <!--     <a class="text-indigo-500 inline-flex items-center" -->
      <!--       >Learn More -->
      <!--       <svg -->
      <!--         fill="none" -->
      <!--         stroke="currentColor" -->
      <!--         stroke-linecap="round" -->
      <!--         stroke-linejoin="round" -->
      <!--         stroke-width="2" -->
      <!--         class="w-4 h-4 ml-2" -->
      <!--         viewBox="0 0 24 24" -->
      <!--       > -->
      <!--         <path d="M5 12h14M12 5l7 7-7 7" /> -->
      <!--       </svg> -->
      <!--     </a> -->
      <!--   </div> -->
      <!-- </div> -->
      <!-- <button -->
      <!--   class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg" -->
      <!--   >Button</button -->
      <!-- > -->
    </div>
  </div>
</section>
