import React from 'react';
import PokemonList from './pokemon-list';

class WantGroup extends React.Component {
  componentDidMount() {
  }

  render() {
    const that = this;

    const {
      pokemonList, groupId, handleEditPokemonClick, handleDeletePokemonClick, connect,
      handleLinkWantAndNeed, linked, groupName, selectedId
    } = that.props;

    let checkbox;
    let buttons;
    if (connect) {
      let checked = false;
      linked.links.forEach((link) => {
        if (link.group_id === groupId && link.selected_id === selectedId) {
          checked = true;
        }
      });
      checkbox = (
        <div>
          <input defaultChecked={checked} type="checkbox" style={{ transform: 'scale(4)', marginTop: '20px' }} onClick={handleLinkWantAndNeed(groupId)} />
        </div>
      );
    } else {
      buttons = (
        <div>
          <button style={{ fontSize: '10em' }} onClick={handleDeletePokemonClick(groupId)}>Delete</button>
          <button style={{ fontSize: '10em' }} onClick={handleEditPokemonClick(groupId)}>Edit</button>
        </div>
      );
    }

    return (
      <div>
        {checkbox}
        <h1 style={{ whiteSpace: 'nowrap' }}>{groupName}</h1>
        <PokemonList pokemonList={pokemonList} />
        {buttons}
      </div>
    );
  }
}

export default WantGroup;