import * as React from "react";
import { FunctionComponent } from "react";
import { getPlayerDisplayName, PlayerSummary } from "@mancala/core";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import MiniBoard, { getStores } from "./MiniBoard";

// A game as a card: the players with the score, a mini board, a status pill and details. Links to the game.
const GameCard: FunctionComponent<{
    id: string,
    player1: PlayerSummary,
    player2: PlayerSummary,
    board: number[],
    // Show player 2's side at the bottom.
    revert?: boolean,
    status: string,
    // Class of the status pill: "live", "win", "lose" or "".
    statusKind: string,
    details: string,
}> = ({ id, player1, player2, board, revert, status, statusKind, details }) => {
    const { t } = useTranslation();
    const name = (player: PlayerSummary) => getPlayerDisplayName(player, t) ?? t("Anonymous");
    const [bottomPlayer, topPlayer] = revert ? [player2, player1] : [player1, player2];
    const stores = getStores(board, revert);
    return (
        <Link className="card" to={`/game/${id}`}
            aria-label={`${name(topPlayer)} ${stores.top} – ${stores.bottom} ${name(bottomPlayer)}, ${status}`}>
            <div className="vs">
                <span className="pn">{name(topPlayer)}</span>
                <span className="score">{`${stores.top} – ${stores.bottom}`}</span>
                <span className="pn r">{name(bottomPlayer)}</span>
            </div>
            <MiniBoard board={board} revert={revert} />
            <div className="meta">
                <span className={"pill " + statusKind}>{status}</span>
                <span>{details}</span>
            </div>
        </Link>
    );
};

export default GameCard;