import * as React from "react";
import { FunctionComponent, useEffect, useState } from "react";
import { LiveGameSummary } from "@mancala/core";
import { AuthUser, Theme } from "@mancala/core";
import AppHeader from "../components/headerbar/AppHeader";
import PageContainer from "../components/PageContainer";
import { PlusIcon } from "../components/Icons";
import ActiveGameBanner from "../components/home/ActiveGameBanner";
import LiveGamesSection from "../components/home/LiveGamesSection";
import RecentGamesSection from "../components/home/RecentGamesSection";
import { Context } from "../context/context";
import { useNavigate } from "react-router-dom";
import Util from "../util/Util";
import { useTranslation } from "react-i18next";

const Home: FunctionComponent<{
  context: Context,
  userKey?: string,
  authUser?: AuthUser,
  theme: Theme,
}> = ({ context, userKey, authUser, theme }) => {

  const navigate = useNavigate();

  const [activeGame, setActiveGame] = useState<LiveGameSummary | null>(null);

  useEffect(() => {
    if (!authUser) return;
    let disposed = false;
    context.authService.getAccessToken()
      .then((token) => context.gameStore.getActiveGame(token))
      .then((game) => !disposed && setActiveGame(game))
      .catch((error) => console.error("(Home) Could not load the active game", error));
    return () => { disposed = true; };
  }, [authUser?.id]);

  const { t } = useTranslation();

  const onNewGameClick = () => {
    if(Util.checkConnectionAndMaybeAlert(context, t)) return;
    navigate("/loby")
  };

  return (
    <PageContainer>
      <AppHeader context={context} authUser={authUser}>
        <button className="btn pri ic-m" aria-label={t("NewGame")} onClick={onNewGameClick}>
          <PlusIcon /><span className="hide-m">{t("NewGame")}</span>
        </button>
      </AppHeader>
      {activeGame && authUser && (
        <ActiveGameBanner
          context={context}
          game={activeGame}
          userId={authUser.id}
          onContinue={() => navigate(`/game/${activeGame.id}`)} />
      )}
      <LiveGamesSection context={context} />
      {authUser && <RecentGamesSection context={context} userId={authUser.id} />}
    </PageContainer>
  );
};

export default Home;