import React from "react";
import "./Trade.css";
import { getPlayerName } from './Common.js';
import PlayerColor from './PlayerColor.js';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Dice from './Dice.js';

const Trade = ({table}) => {

  const rollClick = (event) => {
    table.throwDice();
  }

  if (!table.game) {
    return (<></>);
  }

  let players = [], hasRolled = true;
  for (let color in table.game.players) {
    const item = table.game.players[color],
      name = getPlayerName(table.game.sessions, color);
    if (color === table.game.color) {
      hasRolled = item.orderRoll !== 0;
    }
    if (name) {
      if (!item.orderRoll) {
        item.orderRoll = 0;
      }
      players.push({ name: name, color: color, ...item });
    }
  }

  players.sort((A, B) => {
    if (A.order === B.order) {
      if (A.orderRoll === B.orderRoll) {
        return A.name.localeCompare(B.name);
      }    
      return B.orderRoll - A.orderRoll;
    }
    return B.order - A.order;
  });

  players = players.map(item => 
    <div className="TradePlayer" key={`player-${item.color}`}>
      <PlayerColor color={item.color}/>
      <div>{item.name}</div>
      { item.orderRoll !== 0 && <>rolled <Dice pips={item.orderRoll}/>.</> }
      { item.orderRoll === 0 && <>has not rolled yet. {item.orderStatus}</>}
    </div>
  );

  return (
    <div className="Trade">
      { table.game && <Paper>
        <div className="Title">Game Order</div>
        <div className="PlayerList">
          { players }
        </div>
        <Button disabled={hasRolled} onClick={rollClick}>Roll Dice</Button>
      </Paper> }
    </div>
  );
};

export default Trade;