import React from 'react';
import {Accept, Reject, Cancel} from './GameProposalAction';
import './GameProposal.css';

const State = {
	WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT",
	WaitForYou:      "GAME_PROPOSAL_WAIT_FOR_YOU",
}

const GameProposal = ({games}) => {

  if (games == null)
    return <p>Loading..</p>

  // for (const [key, value] of Object.entries(games))
  //   console.log(key, value);
   
  const waitForYou = games
    .filter(game => game.status === State.WaitForYou)
    .map(game => { 
      return <div class="li" key={game.uuid}>
        <p>
          from {game.opponentName}, opponentColor {game.opponentColor}
          <br/>
          <q>{game.message}</q>
          <br/>
          <Accept uuid={game.uuid}/>
          <Reject uuid={game.uuid}/>
        </p>
        </div>
    });

  const WaitForOpponent = games
    .filter(game => game.status === State.WaitForOpponent)
    .map(game => { 
      return <div class="li" key={game.uuid}>
        <p> 
          to {game.opponentName}, opponentColor ⛀ ⛂{game.opponentColor}
          <br/>
          <q>{game.message}</q>
          <br/>
          <Cancel uuid={game.uuid}/>
        </p>
        </div>
    });

  return <div className="GameProposal">
    {waitForYou}
    {WaitForOpponent.length > 0 && 
      <div class="separator">
        waiting for opponent ({WaitForOpponent.length})
      </div>
    }
    {WaitForOpponent}
    </div>
};

export default GameProposal;