import * as React from 'react';
import { View, Button, Pressable, Text } from 'react-native';
import { useTranslation } from 'react-i18next';
import { HomeScreenProps } from '../types';
import CircularPanel from '../components/CircularPanel';
import { SvgXml } from 'react-native-svg';
import helpSvg from '../svg/help';
import { getColorByBrightness } from "@mancala/core";

export function HomeScreen({ navigation, route }: HomeScreenProps) {

  const { context } = route.params;
  const { t } = useTranslation();
  const [lastGameId, setLastGameId] = React.useState<string | undefined>(undefined);

  const textColorOnAppBar = getColorByBrightness(
    context.themeManager.theme.appBarBgColor,
    context.themeManager.theme.textColor,
    context.themeManager.theme.textLightColor
  );

  const updateHeaderButton = () => {
    navigation.setOptions({
      headerRight: () => (
        <Pressable onPress={() => {
          navigation.push("Help", { context })
        }}>
          <SvgXml xml={helpSvg.replaceAll("customColor", textColorOnAppBar)} width="24" height="24" />
        </Pressable>
      ),
    });
  }

  React.useEffect(() => {
    updateHeaderButton();
    const savedGameId = context.storage.getString('lastGameId');
    if (savedGameId) {
      setLastGameId(savedGameId);
    }
  }, []);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: context.themeManager.theme?.background }}>
      <Pressable onPress={() => navigation.replace('Loby', { context })}>
        <CircularPanel color={context.themeManager.theme?.boardColor} children={<Text style={{ color: context.themeManager.theme.textColor }}>{t('NewGame')}</Text>} />
      </Pressable>
      {lastGameId && (
        <>
          <View style={{ height: 20 }} />
          <Pressable onPress={async () => {
            try {
              const userKey = await context.userKeyStore.getUserKey();
              navigation.replace('Game', { context, gameId: lastGameId, userKey });
            } catch (error) {
              context.storage.deleteString('lastGameId');
              setLastGameId(undefined);
            }
          }}>
            <CircularPanel color={context.themeManager.theme?.boardColor} children={<Text style={{ color: context.themeManager.theme.textColor }}>{t('RejoinGame')}</Text>} />
          </Pressable>
        </>
      )}
    </View>
  );
}