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';

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 = <>Congratulations, <b>{name}</b>!
    They have won the game! The game played 
    for {Math.floor(table.game.turns / playerCount)} turns.
    </>;
  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 = <>{getPlayerName(table.game.sessions, key)} finished with {tmp.points} victory points.</>
    description = <>{description}<p>{line}</p></>;
  }

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

  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;