content: import React, { Component } from 'react';
  import GameData from '../containers/gameData';
  import {connect} from 'react-redux';
  import {bindActionCreators} from 'redux';
  import EditGameSection from '../containers/EditGameSection';
  import {cloneDeep} from 'lodash';
  
  class Games extends Component {
  
      constructor(props){
          super(props);
         this.toggeleGame = this.toggeleGame.bind(this);
         this.getGameData = this.getGameData.bind(this);
         this.toggeleShowNewGameSection = this.toggeleShowNewGameSection.bind(this);
         this.getTheInitialState = this.getTheInitialState.bind(this);
         this.state =  this.getTheInitialState(this.props.pokerStats.games);
     }
  
     componentWillReceiveProps(nextProps) {
          const newState = this.getTheInitialState(nextProps.pokerStats.games);
          this.setState({
              gameItems:newState.gameItems,
              showNewGameSection:this.state.showNewGameSection
          });
     }
  
     getTheInitialState(games){
      //console.log('Games getTheInitialState  games:',games.length);
          let gameItems =  cloneDeep(games);
          if (gameItems && gameItems.length>0){  
              gameItems.reverse();
              gameItems[0].show = true;
          }else{
              gameItems=[];
          }
  
          return ({
              gameItems:gameItems,
              showNewGameSection:false
          });
      }
  
     toggeleShowNewGameSection(){
         const newState = cloneDeep(this.state);
         newState.showNewGameSection = !newState.showNewGameSection;
         this.setState(newState);
     }
  
     getGameData(game){
         let winnerData;
         let playerCashoutVal=0;
         let potSize=0
         const {groupCurrencySign,playersObject} = this.props.pokerStats;
      
         game.players.map(player=>{
             const {enter,exit} = player;
             potSize+= enter;
             const dif = exit-enter;
             if (dif > playerCashoutVal){
                 playerCashoutVal = dif;
                 winnerData =   `${playersObject[player.id].displayName}   ${dif}${groupCurrencySign}`;
             }
         });
         return {
             winnerData:winnerData,
             potSize:potSize
         };
     }
  
     toggeleGame(gameId){
       const newState = cloneDeep(this.state);
       const gameToChange = newState.gameItems.find(item => (item.id === gameId));
       gameToChange.show = !(!!gameToChange.show);
  
       this.setState(newState);
     }
  
      render() {
         // console.log('Games render');
          const {connected,games,isAdmin,connecting,loginError, playersSummary,playersObject,groupCurrencySign } =  this.props.pokerStats;
          if (!connected){
              return <div/>;
          }
          
    
          const items = [];
          if (this.state.gameItems.length==0){
              items.push (
                  <div key="nogame"  className="row text-center" >
                       <h2>No Games Yet</h2>
                        
                  </div>
              );
          }
          this.state.gameItems.map((game, i) => {
              const gameIndex =  games.length -i;
              let gameExtraData = game.extraData ? game.extraData+',' : "";
              const header = `Game  #${gameIndex}:  ${game.name}, ${gameExtraData} `;
              const {potSize,winnerData} = this.getGameData(game);
              const subHeader = `${game.players.length} players. Pot size: ${potSize}${groupCurrencySign}.  Highest payout: ${winnerData}`;
              let gameData = <div/>;
              let togeleClass = " glyphicon glyphicon-plus-sign";
              if (game.show){
                  gameData =   <GameData Game={game} /> ;
                  togeleClass = "glyphicon glyphicon-minus-sign";
              }
              const togele = (<span onClick={()=>this.toggeleGame(game.id)} className={togeleClass} aria-hidden="true" >  </span>);
              
               items.push (
                  <div   className="row GameObjectBox" key={header} >
                       <div className="col-xs-11" onClick={()=>this.toggeleGame(game.id)}>
                          <div  className="GameObjectHeader">   
                              {header}       
                          </div>
                          <div  className="GameObjectSubHeader"> 
                               {subHeader}
                          </div>
                        </div>
                        <div className="col-xs-1">
                              <div className="togele">
                                      {togele}
                              </div> 
                        </div>
                        <hr/>
                        <div className="col-xs-12">
                          {gameData} 
                        </div>
                        
                  </div>
              );
          });
          let addNewGameButton = isAdmin && ! this.state.showNewGameSection ?
              ( <div className="text-center">
                  <button className="createNewGameButton" onClick={this.toggeleShowNewGameSection} >Create New Game</button>
              </div>) : <div/>;
             
          const newGameSection = this.state.showNewGameSection ? <EditGameSection onCancel={this.toggeleShowNewGameSection} /> : <div/>;
          return ( 
              <div id="games" className="section md-padding">
                  <div className="container">
                      <div className="row">
                          <div className="text-center">
                              <h2 className="title" id="gamesHeader">Games</h2>
                          </div>
                         {addNewGameButton}
                         {newGameSection}
                          <div className="games">
                              { items}
                          </div>                       
                      </div>
                  </div>
              </div>
          );
      
  
     }
  }
  
  function mapStateToProps(state){
      return {pokerStats:state.pokerStats};
  }
  
  function mapDispatchToProps(dispatch){
      return bindActionCreators({},dispatch);
  }
  
  export default connect(mapStateToProps,mapDispatchToProps)(Games);
  