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, url, id } = this.state;
      if (onSelectPokemon !== undefined) {
        this.setState({ selected: !selected });
        onSelectPokemon(!selected, url, id, deselect);
      }
    };

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

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

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

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

export default Pokemon;