import React, {FunctionComponent} from "react";
import Deck from "./Deck";
import Hand from "./Hand";

interface GameState {
    PlayerName: string;
    Hand: string[];
    CurrentCard: string;
    CurrentPlayer: string;
    Players: string[];
}

interface Props {
    gameState: GameState
    handleCardSend: (cardString: string) => void;
    handleDraw: () => void;
}

const Game:FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw}) => {
    return (
        <div className="game">
            {
                gameState.CurrentCard &&
                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw}/>
            }
            {
                gameState.Hand &&
                <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
            }
            <ul>
                {
                    gameState.Players &&
                    gameState.Players.map((player, index) => {
                        const isCurrentPlayer = player === gameState.CurrentPlayer;
                        const isMe = player === gameState.PlayerName;
                        return <li key={index} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
                            {player} {isMe && '(You)'}
                        </li>
                    })
                }
            </ul>
        </div>
    )
}

export default Game;