import React from "react";
import Resource from './Resource.js';
import "./PlayersStatus.css";
import BoardPieces from './BoardPieces.js';
import { getPlayerName } from './Common.js';
import PlayerColor from './PlayerColor.js';
import Placard from './Placard.js';

const Player = ({ table, color, onClick, reverse }) => {
  if (!table.game) {
    return <></>;
  }
  const game = table.game;
  const player = game.players[color];
 
  const developmentCards = player.unplayed
    ? <Resource label={true} type={'progress-back'} 
        count={player.unplayed} disabled/>
    : undefined;
  const armyCards = player.army 
    ? <Resource label={true} type={'army-1'} count={player.army} disabled/>
    : undefined;
  let points = <></>;
  if (player.points && reverse) {
    points = <><b>{player.points}</b><Resource type={'progress-back'} 
      count={player.points} disabled/></>;
  } else if (player.points) {
    points = <><Resource type={'progress-back'} count={player.points} 
      disabled/><b>{player.points}</b></>;
  }
  
  const longestRoad = game.longestRoad && game.longestRoad === color ?
      <Placard
        disabled
        active={false}
        type='longest-road'
        count={game.longestRoadLength}
      /> : undefined;

    const largestArmy = game.largestArmy && game.largestArmy === color ?
      <Placard
        disabled
        active={false}
        type='largest-army'
        count={game.largestArmySize}
      /> : undefined;
  
  return <div className="Player">
      <div className="Who">
        <PlayerColor color={color}/>{getPlayerName(game.sessions, color)}
      </div>
      <div className="What">
        { game.color === color &&
          <div className="LongestRoad">
            Longest road: {player.longestRoad ? player.longestRoad : 0}
          </div>
        }
        <div className="Points">{points}</div>
        { (largestArmy || longestRoad || armyCards || developmentCards) && <>
          <div className="Has">
            { !reverse && <>
              { largestArmy }
              { longestRoad }
              { !largestArmy && armyCards }
              { developmentCards }
            </> }
            { reverse && <>
              { developmentCards }
              { !largestArmy && armyCards }
              { longestRoad }
              { largestArmy }
            </> }
          </div>
        </> }
      </div>
      <div className={`${onClick ? 'Normal' : 'Shrunken'}`}>
        <BoardPieces onClick={onClick} table={table} color={color}/>
      </div>
    </div>
};

const PlayersStatus = ({ table, onClick, color, active }) => {
  if (!table.game) {
    return <></>;
  }

  const game = table.game;
  let players;
  if (color) {
    players = <Player
      onClick={onClick}
      reverse
      key={`PlayerStatus-${getPlayerName(game.sessions, color)}`}
      table={table}
      color={color}/>;
  } else {
    players = Object.getOwnPropertyNames(game.players)
    .filter(color => game.players[color].status === 'Active' 
      && game.color !== color)
    .map(color => {
      return <Player
        onClick={onClick}
        key={`PlayerStatus-${getPlayerName(game.sessions, color)}`}
        table={table}
        color={color}/>;
    });
  }

  return (
    <div className={`PlayersStatus ${active ? 'ActivePlayer' : ''}`}>
      { players }
    </div>
  );
}

export default PlayersStatus;