import React, { Component, Fragment } from 'react';
import { NavBar } from './components/layout/navbar.component';
import { SearchPokemon } from './components/pokemon/search-pokemon.component';
import { PokemonList } from './components/pokemon/pokemon-list.component';

class App extends Component {
  state = {
    search: '',
    pokeData: []
  };

  async componentDidMount() {
    try {
      // Getting all of the pokemon
      const res = await fetch(`https://pokeapi.co/api/v2/pokemon/?limit=964`);
      const data = await res.json();
      this.setState({ pokeData: data });
    } catch (e) {
      console.log(e);
    }
  }

  /*  async componentDidUpdate() {
    try {
      this.state.pokeData.map(async pokemon => {
        const res = await fetch(
          `https://pokeapi.co/api/v2/pokemon/${pokemon.name}?limit=1`
        );
        const data = await res.json();
        console.log(data);
        // this.setState({ pokeSprites: data.sprites.front_default });
      });
    } catch (e) {
      console.log(e);
    }
  } */

  handleChangePokemon = async e => {
    this.setState({ search: e.target.value });
  };

  getPokemon = async pokemon => {
    try {
      const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`);
      //const res = await fetch(`https://pokeapi.co/api/v2/pokemon/pikachu`);
      const data = await res.json();
      this.setState({ pokeData: data });
      //console.log(data);
    } catch (e) {
      console.log(e);
    }
  };

  render() {
    const { pokeData } = this.state;

    return (
      <Fragment>
        <NavBar />
        <div className='container py-5'>
          <div className='row'>
            <SearchPokemon
              getPokemon={this.getPokemon}
              handleChangePokemon={this.handleChangePokemon}
              search={this.state.search}
            />
          </div>
          <div className='row'>
            <PokemonList pokeData={pokeData} />
          </div>
        </div>
      </Fragment>
    );
  }
}

export default App;