content: import React, { Component } from 'react';
  import {connect} from 'react-redux';
  import {cloneDeep} from 'lodash';
  import {getBackgroundColorByPlayerName, geTextColorByPlayerName} from '../colorsHelper';
  import {bindActionCreators} from 'redux';
  import {LineChart,ReferenceLine, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';
  
  class OfficialRankGraph extends Component {
     constructor(props){
         super(props);
         this.toggleButton=this.toggleButton.bind(this);
         let {rankedPlayers} =this.props;
         const ids = rankedPlayers.map(item=>item.playerObject.id);
         const names = {};
         rankedPlayers.forEach((item)=>{
             names[item.playerObject.id]= item.playerObject.displayName;
          } );
         this.state = {
             allIds:ids,
             ids:ids,
             names:names
         }
     }
  
     toggleButton(id){
       
          const newState = cloneDeep(this.state);
          let {ids,allIds}  = newState;
          console.log('toggleButton ',id);
          console.log('before ids ',ids);
          if (ids.includes(id)){
              console.log('removing ',id);
              ids = ids.filter(x=>x!==id);
          }else{
              console.log('adding ',id);
              console.log('allIds ',allIds);
              ids = allIds.filter(x =>{
                 
                    return  (x===id || ids.includes(x));  
              });
          }
          console.log('after ids ',ids);
          newState.ids= ids;
          this.setState(newState);
     }
  
      render() {
          
          let {width,height,games,rankedPlayers,loggedInPlayerId} =this.props;
          const {names, ids, allIds}  = this.state;
          const prevData = {};
          const data = games.map(game => {
              const item = {name:game.name}; 
              const {players} = game;
              ids.forEach(id=>{
                  const player = players.find(p=>p.id===id);
                  if (player){
                      let dif = player.exit - player.enter;
                      if (prevData.hasOwnProperty(id)){
                          dif += prevData[id];
                      }
                      prevData[id] = dif;
                      item[names[id]] = dif;
                  }  else{
                      if (prevData.hasOwnProperty(id)){
  
                          item[names[id]] = prevData[id];
                      }
                     
                  }
              });
              return item;
          })
          const bc = {name:' '};
          ids.forEach(id=>{bc[names[id]] = 0});
          data.unshift(bc)
          const strokes={};
          const textColors={};
          let positive_index = 0;
          let non_positive_index = 1;
          rankedPlayers.forEach((item)=>{
              const id = item.playerObject.id;
              if ( !ids.includes(id)){
                  strokes[id]= 'pressed'; 
                  textColors[id]= 'black'; 
                  return;
              }
              let color =getBackgroundColorByPlayerName(id);// 'black';
              let textColor = geTextColorByPlayerName(id);// 'black';
              if (id ===loggedInPlayerId){
                  color='blue';
                  textColor = 'white';
              }
             
              strokes[id]= color ; 
             
              textColors[id]= textColor; 
             
           } );
  
          const lines =ids.map(id=>(<Line className="graphLine" strokeWidth={(id ===loggedInPlayerId ? 4 :2)} type="monotone" key={id} dataKey={names[id]} stroke={strokes[id]}  th />));
  
          const buttons = allIds.map(id=> {
  
              const style={
                  backgroundColor:strokes[id], 
                  color:textColors[id],
                  marginLeft:"10px"
              }
              if (strokes[id]==='pressed'){
                  style.backgroundColor='#e5e5e5';
                  style['-webkit-box-shadow']= 'inset 0px 0px 5px #c1c1c1';
                  style['-moz-box-shadow']= 'inset 0px 0px 5px #c1c1c1';
                  style['box-shadow']= 'inset 0px 0px 5px #c1c1c1';
              }
              return (<button style={style} onClick={()=>{this.toggleButton(id)}}>{names[id]} </button>);
          });
          //toggleButton(id)
          const graph = (
                  <div className="row">
                       <div className="rankedPlayersGraph" width={width}>
                          <LineChart className="rankedPlayersGraphLineChart" width={width} height={height} data={data}  >
                              <XAxis dataKey="name"/>
                              <YAxis/>
                              <CartesianGrid strokeDasharray="2 20"/>
                              <Tooltip/>
                             
                              <ReferenceLine y={0} label="Zero" stroke="black"/>
                              {lines}
                          </LineChart>
                      </div>
                      <div className="buttons" width={width}>
                      Filter {buttons}
                      </div>
                  </div>
              );
          return graph;    
      }
  }
  
  function mapStateToProps(state){
      return {pokerStats:state.pokerStats};
  }
  
  function mapDispatchToProps(dispatch){
      return bindActionCreators({},dispatch);
  }
  
  export default connect(mapStateToProps,mapDispatchToProps)(OfficialRankGraph);
  
  
  