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 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();
  }, []);

  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>
    </View>
  );
}