import React, { Component } from 'react';


export default class SelectablePersonComponent extends Component{
  constructor(props) {
    super(props);
    this.state = {personName: this.props.person.personName, isSelected: this.props.person.isSelected};
    this.personSelectedChangedEventHandler = this.personSelectedChangedEventHandler.bind(this);
  }

  personSelectedChangedEventHandler(event) {
    this.setState(prevState => ({
      isSelected: !prevState.isSelected
    }));
    this.props.personsSelectionChanged(this.props.index);
  }

  render(){
    return (
      <div>
        <div className = "horizontalDiv">
          <input type = "checkbox" checked = {this.state.isSelected} onChange = {this.personSelectedChangedEventHandler}></input>
          <div>{this.state.personName}</div>
        </div>
      </div>
    )
  }
}