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

class Pokemon extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      url: props.url,
      selected: false,
      onSelectPokemon: props.onSelectPokemon,
    };
  }

  render() {
    const { url, selected, onSelectPokemon } = this.state;

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

    const handleAddPokemonClick = () => () => {
      const { selected } = this.state;
      this.setState({ selected: !selected });
      onSelectPokemon(!selected, url);
    };

    return (
      <div>
        <img className={className} src={url} onClick={handleAddPokemonClick()} />
      </div>
    );
  }
}

export default Pokemon;