PartyApp/src/navigation/registration/registration.tsx

import {MyScreenContainer} from '@components/MyScreenContainer';
import {SlideFromLeftView} from '@helper/animations';
import {RootScreenNavigationProp} from '@navigation/navigation';
import {useNavigation} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationOptions,
} from '@react-navigation/native-stack';
import {Image, View} from 'react-native';

import GoogleLogo from '@assets/google-logo.png';
import AppleLogo from '@assets/apple-logo.png';
import Logo from '@assets/logo.png';

import {MyDividerWithText} from '@components/MyDivider';
import {MyButton, MyImageButton} from '@components/MyButton';
import {MyClickableText} from '@components/MyClickableText';
import {OpenURL} from '@helper/linking';
import {Constants} from '@utils/utils';
import {MyTitle} from '@components/MyTitle';
import {useSelector} from 'react-redux';
import {RootState} from '@redux/store';
import {Text} from '@gluestack-ui/themed';
import {Login} from '@pages/welcome/login/login';
import {
  SignUpStepAccountName,
  SignUpStepPassword,
  //SignUpStepPhoneNumber,
  SignUpStepUsername,
  //SignUpStepVerifyPhoneNumber,
} from '@pages/welcome/signUp/signUp';

export type RegistrationStackNavigatorParamList = {
  SignUpPreview: undefined;
  SignUpStepUsername: undefined;
  // SignUpStepPhoneNumber: undefined;
  // SignUpStepVerifyPhoneNumber: undefined;
  SignUpStepPassword: undefined;
  SignUpStepAccountName: undefined;
  LoginPreview: undefined;
  Login: undefined;
};

const RegistrationStack =
  createNativeStackNavigator<RegistrationStackNavigatorParamList>();

export function RegistrationScreenAnim(props: any) {
  return (
    <SlideFromLeftView>
      <RegistrationScreen {...props} />
    </SlideFromLeftView>
  );
}

export function RegistrationScreen() {
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  const headerStyle: NativeStackNavigationOptions = {
    headerShown: true,
    headerStyle: {backgroundColor: currentTheme.backgroundDark400},
    headerTitleAlign: 'center',
    headerTitle: '',
  };

  /*
  <RegistrationStack.Screen
    name="SignUpStepPhoneNumber"
    component={SignUpStepPhoneNumber}
    options={{...headerStyle}}
  />
  <RegistrationStack.Screen
    name="SignUpStepVerifyPhoneNumber"
    component={SignUpStepVerifyPhoneNumber}
    options={{...headerStyle}}
  />
  */

  return (
    <RegistrationStack.Navigator screenOptions={{headerShown: false}}>
      <RegistrationStack.Screen
        name="SignUpPreview"
        component={SignUpPreview}
      />
      <RegistrationStack.Screen name="LoginPreview" component={LoginPreview} />
      <RegistrationStack.Screen
        name="Login"
        component={Login}
        options={{...headerStyle}}
      />
      <RegistrationStack.Screen
        name="SignUpStepUsername"
        component={SignUpStepUsername}
        options={{...headerStyle}}
      />
      <RegistrationStack.Screen
        name="SignUpStepPassword"
        component={SignUpStepPassword}
        options={{...headerStyle}}
      />
      <RegistrationStack.Screen
        name="SignUpStepAccountName"
        component={SignUpStepAccountName}
        options={{...headerStyle}}
      />
    </RegistrationStack.Navigator>
  );
}

function SignUpPreview() {
  return <RegistrationPreview type="signup" />;
}

function LoginPreview() {
  return <RegistrationPreview type="login" />;
}

function ThirdAuthButtons() {
  const lang = useSelector(
    (state: RootState) => state.appVariables.lang.registration.thirdAuthButton,
  );

  return (
    <>
      <MyImageButton
        image={GoogleLogo}
        imageStyle={{left: 2, height: 35, width: 35}}
        text={lang.google}
      />

      <MyImageButton
        image={AppleLogo}
        imageStyle={{height: 40, width: 40}}
        text={lang.apple}
      />
    </>
  );
}

function RegistrationPreview({type}: {type: 'login' | 'signup'}) {
  const lang = useSelector(
    (state: RootState) => state.appVariables.lang.registration,
  );
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );
  const navigation = useNavigation<RootScreenNavigationProp>();

  return (
    <MyScreenContainer
      style={{
        flexDirection: 'column',
      }}>
      <View style={{flex: 1, marginTop: 10, alignItems: 'center'}}>
        <Image source={Logo} style={{height: 60, width: 60}} />
      </View>

      <View style={{flex: 2, justifyContent: 'center'}}>
        <MyTitle
          text={
            type === 'login'
              ? lang.previewLogin.title
              : lang.previewSignup.title
          }
        />
      </View>

      <View
        style={{
          gap: 10,
          flex: 3,
          justifyContent: 'flex-end',
          marginBottom: 20,
        }}>
        <ThirdAuthButtons />

        <MyDividerWithText text={lang.dividerText} />

        <MyButton
          type="secondary"
          text={type === 'login' ? lang.buttonLogin : lang.buttonSignUp}
          style={{marginBottom: 20}}
          onPress={() => {
            navigation.navigate(
              'Registration',
              type === 'login'
                ? {screen: 'Login'}
                : {screen: 'SignUpStepUsername'},
            );
          }}
        />

        {type === 'signup' && (
          <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
            <Text
              color={
                currentTheme.textLight100
              }>{`${lang.previewSignup.agreeToTerms} `}</Text>
            <MyClickableText
              text={lang.previewSignup.terms}
              textStyle={{color: currentTheme.primary300}}
              onPress={() => OpenURL(Constants.REGISTRATION.TERMS_URL)}
            />
            <Text color={currentTheme.textLight100}>, </Text>
            <MyClickableText
              text={lang.previewSignup.privacyPolicy}
              textStyle={{color: currentTheme.primary300}}
              onPress={() => OpenURL(Constants.REGISTRATION.PRIVACY_POLICY_URL)}
            />
            <Text
              color={
                currentTheme.textLight100
              }>{` ${lang.previewSignup.agreeToTermsAnd} `}</Text>
            <MyClickableText
              text={lang.previewSignup.cookieUse}
              textStyle={{color: currentTheme.primary300}}
              onPress={() => OpenURL(Constants.REGISTRATION.COOKIE_USE_URL)}
            />
            <Text color={currentTheme.textLight100}>.</Text>
          </View>
        )}

        <View style={{flexDirection: 'row'}}>
          {type === 'login' ? (
            <Text color={currentTheme.textLight100}>
              {lang.previewLogin.dontHaveAccount}
            </Text>
          ) : (
            <Text color={currentTheme.textLight100}>
              {lang.previewSignup.alreadyHaveAccount}
            </Text>
          )}

          <MyClickableText
            text={type === 'login' ? lang.buttonSignUp : lang.buttonLogin}
            textStyle={{
              left: 2,
              color: currentTheme.secondary300,
              fontWeight: 'bold',
            }}
            onPress={() => {
              navigation.navigate(
                'Registration',
                type === 'login'
                  ? {screen: 'SignUpPreview'}
                  : {screen: 'LoginPreview'},
              );
            }}
          />
        </View>
      </View>
    </MyScreenContainer>
  );
}

export function ContentContainer({children}: {children: React.ReactNode}) {
  return (
    <>
      <View style={{flex: 1}} />
      <View style={{flex: 8}}>{children}</View>
    </>
  );
}

export function navigateToHome(navigation: RootScreenNavigationProp) {
  navigation.navigate('Home', {screen: 'Map', params: {screen: 'Overview'}});
  navigation.reset({
    index: 0,
    routes: [{name: 'Home'}],
  });
}