import * as React from "react";
import { FunctionComponent, useEffect, useState } from "react";
import { FinishedGameSummary } from "@mancala/core";
import { useTranslation } from "react-i18next";
import { Context } from "../../context/context";
import { formatDate, getResultPillClass, getResultText, getViewerSeat } from "../../util/GameResultText";
import GameCard from "./GameCard";
import HomeSection from "./HomeSection";

const GAME_COUNT = 3;

// The user's last finished games, each shown from their side of the board.
const RecentGamesSection: FunctionComponent<{ context: Context, userId: string }> = ({ context, userId }) => {
    const { t, i18n } = useTranslation();
    const [games, setGames] = useState<FinishedGameSummary[] | undefined>(undefined);

    useEffect(() => {
        let disposed = false;
        context.authService.getAccessToken()
            .then((token) => context.gameStore.getMyRecentGames(token, GAME_COUNT))
            .then((recent) => !disposed && setGames(recent))
            .catch((error) => console.error("(Home) Could not load recent games", error));
        return () => { disposed = true; };
    }, [userId]);

    if (!games) return <></>;
    return (
        <HomeSection title={t("MyRecentGames")} subtitle={t("YourGames")} emptyText={t("NoGamesYet")}>
            {games.map((game) => (
                <GameCard
                    key={game.id}
                    id={game.id}
                    player1={game.player1}
                    player2={game.player2}
                    board={game.board}
                    revert={getViewerSeat(game, userId) === "player2"}
                    status={getResultText(game, userId, t)}
                    statusKind={getResultPillClass(game, userId)}
                    details={formatDate(game.endedAt, i18n.language)} />
            ))}
        </HomeSection>
    );
};

export default RecentGamesSection;