import React from 'react';
import style from './pokemon.css';

class Pokemon extends React.Component {
  constructor(props) {
    super(props);

    const deselect = () => {
      this.setState({ selected: false });
    };

    const handleAddPokemonClick = () => () => {
      const { onSelectPokemon } = this.props;
      const { selected, pokemon } = this.state;
      if (onSelectPokemon !== undefined) {
        this.setState({ selected: !selected });
        onSelectPokemon(!selected, pokemon, deselect);
      }
    };

    this.state = {
      pokemon: props.pokemon,
      selected: false,
      handleAddPokemonClick,
    };
  }

  render() {
    const { REACT_APP_BACKEND_URL } = process.env;
    const { pokemon, selected, handleAddPokemonClick } = this.state;

    let className = '';
    if (selected) {
      className = 'selected';
    }

    return (
      <div>
        <img className={className} src={REACT_APP_BACKEND_URL+"/"+pokemon.url} onClick={handleAddPokemonClick()} />
        <h2>
          {pokemon.name}
          {', shiny: '}
          {String(pokemon.shiny)}
        </h2>
      </div>
    );
  }
}

export default Pokemon;