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

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

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

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

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

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

    return (
      <div>
        <Menu active={0} />
        <PokemonList pokemonList={pokemonList} />
        <button style={{ fontSize: '10em' }} type="button" onClick={handleAddPokemonClick()}>Add</button>
        <ConnectModal pokemonList={pokemonList}/>
      </div>
    );
  }
}


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