import React, { Component } from 'react';
import * as ReactDOM from 'react-dom';
import PokemonList from '../components/pokemon-list';
import Menu from '../components/menu';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      pokemonList: [],
      selectedPokemon: [],
    };
  }

  componentDidMount() {
    fetch('/api/available-pokemon')
      .then(response => response.json())
      .then((data) => {
        this.setState({ pokemonList: data.pokemons });
      });
  }

  render() {
    const { pokemonList, selectedPokemon } = this.state;

    const handleDoneClick = () => () => {
      const pokemons = [];
      selectedPokemon.forEach((url) => {
        pokemons.push({
          url,
        });
      });
      fetch('api/stored-pokemon', {
        method: 'POST',
        body: JSON.stringify(pokemons),
      }).then(() => {
        window.location.href = '/index.html';
      });
    };

    const onSelectPokemon = (selected, url) => {
      if (selected) {
        selectedPokemon.push(url);
      } else {
        const index = selectedPokemon.indexOf(url);
        if (index > -1) {
          selectedPokemon.splice(index, 1);
        }
      }
      this.setState({ selectedPokemon });
    };

    return (
      <div>
        <Menu />
        <PokemonList pokemonList={pokemonList} onSelectPokemon={onSelectPokemon} />
        <button type="button" style={{ fontSize: '10em' }} onClick={handleDoneClick()}>Done</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('main'));