import * as React from "react";
import { FunctionComponent } from "react";
import { getColorByBrightness, getPlayerDisplayName, LiveGameSummary } from "@mancala/core";
import { useTranslation } from "react-i18next";
import { Context } from "../../context/context";
import Button from "../Button";

// Shown at the top of the home page while the user has a game in progress.
const ActiveGameBanner: FunctionComponent<{
    context: Context,
    game: LiveGameSummary,
    userId: string,
    onContinue: () => void,
}> = ({ context, game, userId, onContinue }) => {
    const { t } = useTranslation();
    const theme = context.themeManager.theme;
    const textColor = getColorByBrightness(theme.boardColor, theme.textColor, theme.textLightColor);
    const opponent = game.player1.userId === userId ? game.player2 : game.player1;
    const turn = game.turnPlayerId === userId ? t("YourTurn") : t("OpponentTurn");
    return (
        <div className="banner" style={{ background: theme.boardColor, color: textColor }}>
            <div>
                <div className="title">{t("GameInProgress")}</div>
                <div>{`${t("Versus")} ${getPlayerDisplayName(opponent, t) ?? t("Anonymous")} · ${turn}`}</div>
            </div>
            <Button context={context} color={theme.pitColor} text={t("Continue")} onClick={onContinue} />
            <style jsx>{`
                .banner {
                    width: calc(100% - 32px);
                    max-width: 868px;
                    margin: 16px 16px 0;
                    padding: 12px 16px;
                    border-radius: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 12px;
                    box-sizing: border-box;
                    transition: background-color 0.5s;
                }
                .title {
                    font-weight: bold;
                    margin-bottom: 4px;
                }
            `}</style>
        </div>
    );
};

export default ActiveGameBanner;