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: [],
      open: false,
    };
  }

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

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

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

    const onSelectPokemon = (selected, url, deselect) => {
      open = true;
      this.setState({ open, deselect });
    };

    const onDeselectPokemon = () => {
      const { deselect } = this.state;
      open = false;
      deselect();
      this.setState({ open, deselect: undefined });
    };

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


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