import * as React from "react";
import { FunctionComponent, useEffect, useState } from "react";
import { getColorByBrightness, LiveGameSummary } from "@mancala/core";
import { AuthUser, Theme } from "@mancala/core";
import HeaderBar from "../components/headerbar/HeaderBar";
import PageContainer from "../components/PageContainer";
import Row from "../components/Row";
import HeaderbarIcon from "../components/headerbar/HeaderbarIcon";
import HeaderbarTitle from "../components/headerbar/HeaderbarTitle";
import ThemeSwitchMenu from "../components/headerbar/ThemeSwitchMenu";
import AccountMenu from "../components/headerbar/AccountMenu";
import ActiveGameBanner from "../components/home/ActiveGameBanner";
import LiveGamesSection from "../components/home/LiveGamesSection";
import RecentGamesSection from "../components/home/RecentGamesSection";
import Button from "../components/Button";
import { Context } from "../context/context";
import { Link, 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")
  };

  const textColorOnAppBar = getColorByBrightness(
    context.themeManager.theme.appBarBgColor,
    context.themeManager.theme.textColor,
    context.themeManager.theme.textLightColor
  );
  return (
    <PageContainer theme={theme!}>
      <HeaderBar color={theme?.appBarBgColor}>
        <Row>
          <Link style={{ textDecoration: 'none' }} to={"/"}>
            <HeaderbarIcon />
          </Link>
          <Link style={{ textDecoration: 'none' }} to={"/"}>
            <HeaderbarTitle title={t("Mancala")} color={textColorOnAppBar} />
          </Link>
        </Row>
        <Row>
          <ThemeSwitchMenu context={context} textColor={textColorOnAppBar} />
          <AccountMenu context={context} textColor={textColorOnAppBar} authUser={authUser} />
          <Button
            context={context}
            color={context.themeManager.theme.pitColor}
            text={t("NewGame")}
            onClick={onNewGameClick} />
        </Row>
      </HeaderBar>
      {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;