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

const Winner = ({table, color}) => {
  const quitClicked = (event) => {
    table.setSelected("");
  }

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

  const name = getPlayerName(table.game.sessions, color),
    player = table.game.players[color];
  let playerCount = 0;
  for (let key in table.game.players) {
    if (table.game.players[key].status !== 'Not active') {
      playerCount++;
    }
  }
  
  let description = <>
    <div>Congratulations, <b>{name}</b>!</div>
    <div><PlayerColor color={color}/> {name} won the game after {Math.floor(table.game.turns / playerCount)} turns. They
    had <b>{player.potential}</b> unplayed Victory Point card(s).</div>
    </>;
  for (let key in table.game.players) {
    if (key === color) {
      continue;
    }
    let tmp = table.game.players[key];
    if (tmp.status === 'Not active') {
      continue;
    }
    let line = <><PlayerColor color={key}/> {getPlayerName(table.game.sessions, key)} finished with {tmp.points} victory points.
     They had <b>{tmp.potential}</b> unplayed Victory Point card(s).</>
    description = <>{description}<div>{line}</div></>;
  }

  description = <>{description}<div>If everyone goes back to the Lobby, you can play again.</div></>;

  return (
    <div className="Winner">
      <Paper>
        <div className="Title">{name} has won with {player.points} victory points!</div>
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <Resource type={`vp-palace`} disabled count={1}/>
          <div className="Description">
            {description}
          </div>
        </div>
        <Button onClick={quitClicked}>Go back to Lobby</Button>
      </Paper>
    </div>
  );
};

export default Winner;