import React, { Component } from 'react';
import * as ReactDOM from 'react-dom';
import Menu from '../components/menu';
import WantGroup from '../components/want-group';

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

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

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

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

    const handleAddPokemonClick = () => () => {
      window.location.href = '/chose.html?type=want';
    };


    return (
      <div>
        <Menu active={1} />
        <WantGroup pokemonList={pokemonList} groupName="want group 1" />
        <button className="addButton" style={{ fontSize: '10em' }} type="button" onClick={handleAddPokemonClick()}>Add</button>
      </div>
    );
  }
}

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