import './index.css';
import React from 'react';
import {Accept} from './GameProposalAction';
import Reject from './Reject'
import Cancel from './GameProposalCancel'

import { AppData } from "../../context/data"
//import { AppContext } from "../../context/app"

export default function GameProposal() {
  const [data] = React.useContext(AppData)

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

  // for (const [key, value] of Object.entries(data.games))
  //   console.log(key, value);
   
  const waitForYou = data.games
    .filter(game => game.status === Status.WaitForYou)
    .map(game => { 
      return <div className="li" key={game.uuid}>
        <p>
          You {Stone(game.myColor)} <i>vs</i> {game.opponentName} {Stone(oppositeColor(game.myColor))}
          <br/>
          <q>{game.message}</q>
          <br/>
          <Accept uuid={game.uuid}/>
          <Reject uuid={game.uuid}/>
        </p>
        </div>
    });

  const WaitForOpponent = data.games
    .filter(game => game.status === Status.WaitForOpponent)
    .map(game => { 
      return <div className="li" key={game.uuid}>
        <p> 
          You {Stone(game.myColor)} <i>vs</i> {game.opponentName} {Stone(oppositeColor(game.myColor))}
          <br/>
          <q>{game.message}</q>
          <br/>
          <Cancel uuid={game.uuid}/>
        </p>
        </div>
    });

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



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

function Stone(color) {
  if (color === "WHITE")
    return <span className="stone">⛀</span>

  if (color === "BLACK")
    return <span className="stone">⛂</span>

  return <span className="stone">{color}</span>
}

function oppositeColor(color) {
  if (color === "WHITE")
    return "BLACK"

  if (color === "BLACK")
    return "WHITE"

  return color
}