path: root/src/routes/main/MainStackScreen.tsx

import {RouteProp} from '@react-navigation/native';
import {StackNavigationOptions} from '@react-navigation/stack';
import React from 'react';
import {StyleSheet, Text} from 'react-native';
import {normalize} from 'react-native-elements';
import BackIcon from '../../assets/icons/back-arrow.svg';
import {
  AccountType,
  AnimatedTutorial,
  BadgeSelection,
  CaptionScreen,
  CategorySelection,
  ChatListScreen,
  ChatScreen,
  CommentReactionScreen,
  CreateCustomCategory,
  DiscoverUsers,
  EditProfile,
  FriendsListScreen,
  IndividualMoment,
  InviteFriendsScreen,
  MomentCommentsScreen,
  MomentUploadPromptScreen,
  NewChatModal,
  NotificationsScreen,
  PrivacyScreen,
  ProfileScreen,
  RequestContactsAccess,
  SettingsScreen,
  SocialMediaTaggs,
  SuggestedPeopleScreen,
  SuggestedPeopleUploadPictureScreen,
  SuggestedPeopleWelcomeScreen,
  TagSelectionScreen,
  TagFriendsScreen,
  CameraScreen,
} from '../../screens';
import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
import {ScreenType} from '../../types';
import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils';
import {MainStack, MainStackParams} from './MainStackNavigator';
import {ZoomInCropper} from '../../components/comments/ZoomInCropper';
import ChoosingCategoryScreen from '../../screens/profile/ChoosingCategoryScreen';

/**
 * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited.
 * Search : To display the search screen. Search for a user on this screen, click on a result tile and navigate to the same.
 * When you click on the search icon after looking at a user's profile, the stack gets reset and you come back to the top of the stack (First screen : Search in this case)
 * SocialMediaTaggs : To display user data for any social media account set up by the user.
 * IndividualMoment : To display individual images uploaded by the user (Navigate to comments from this screen, click on a commenter's profile pic / username, look at a user's profile. Click on the profile icon again to come back to your own profile).
 * MomentCommentsScreen : Displays comments posted by users on an image uploaded by the user.
 * EditProfile : To edit logged in user's information.
 */

type MainStackRouteProps = RouteProp<MainStackParams, 'Profile'>;

interface MainStackProps {
  route: MainStackRouteProps;
}
const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
  const {screenType} = route.params;

  const isNotificationsTab = screenType === ScreenType.Notifications;
  const isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople;
  const isUploadTab = screenType === ScreenType.Upload;

  const initialRouteName = (() => {
    switch (screenType) {
      case ScreenType.Profile:
        return 'Profile';
      case ScreenType.Notifications:
        return 'Notifications';
      case ScreenType.SuggestedPeople:
        return 'SuggestedPeople';
      case ScreenType.Chat:
        return 'ChatList';
      case ScreenType.Upload:
        return 'Upload';
    }
  })();

  const tutorialModalStyle: StackNavigationOptions = {
    cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
    gestureDirection: 'vertical',
    cardOverlayEnabled: true,
    cardStyleInterpolator: ({current: {progress}}) => ({
      cardStyle: {
        opacity: progress.interpolate({
          inputRange: [0, 0.5, 0.9, 1],
          outputRange: [0, 0.25, 0.7, 1],
        }),
      },
    }),
  };

  const newChatModalStyle: StackNavigationOptions = {
    cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
    cardOverlayEnabled: true,
    animationEnabled: false,
  };

  const mainStackScreen = () => {
    return (
      <MainStack.Navigator
        screenOptions={{
          headerShown: false,
          gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6},
        }}
        mode="card"
        initialRouteName={initialRouteName}>
        <MainStack.Screen
          name="Profile"
          component={ProfileScreen}
          initialParams={{screenType}}
          options={{
            ...headerBarOptions('white', ''),
          }}
        />
        {isSuggestedPeopleTab && (
          <MainStack.Screen
            name="SuggestedPeople"
            component={SuggestedPeopleScreen}
            initialParams={{screenType}}
          />
        )}
        {isNotificationsTab && (
          <MainStack.Screen
            name="Notifications"
            component={NotificationsScreen}
            initialParams={{screenType}}
          />
        )}
        {isUploadTab && (
          <MainStack.Screen
            name="Upload"
            component={CameraScreen}
            initialParams={{screenType}}
          />
        )}
        <MainStack.Screen
          name="DiscoverUsers"
          component={DiscoverUsers}
          options={{
            ...headerBarOptions('white', 'Discover Users'),
          }}
        />
        <MainStack.Screen
          name="SettingsScreen"
          component={SettingsScreen}
          options={{
            ...headerBarOptions('white', 'Settings and Privacy'),
          }}
        />
        <MainStack.Screen
          name="PrivacyScreen"
          component={PrivacyScreen}
          options={{
            ...headerBarOptions('white', 'Privacy'),
          }}
        />
        <MainStack.Screen
          name="AccountTypeScreen"
          component={AccountType}
          options={{
            ...headerBarOptions('white', 'Account Type'),
          }}
        />
        <MainStack.Screen
          name="AnimatedTutorial"
          component={AnimatedTutorial}
          options={{
            ...tutorialModalStyle,
          }}
          initialParams={{screenType}}
        />
        <MainStack.Screen
          name="CaptionScreen"
          component={CaptionScreen}
          options={{
            ...modalStyle,
            gestureEnabled: false,
          }}
        />
        <MainStack.Screen
          name="ChoosingCategoryScreen"
          component={ChoosingCategoryScreen}
          options={{
            ...headerBarOptions('white', 'Categories'),
          }}
        />
        <MainStack.Screen
          name="SocialMediaTaggs"
          component={SocialMediaTaggs}
          initialParams={{screenType}}
          options={{
            ...headerBarOptions('white', ''),
            headerStyle: {height: AvatarHeaderHeight},
          }}
        />
        <MainStack.Screen
          name="CategorySelection"
          component={CategorySelection}
          options={{
            ...headerBarOptions('white', ''),
          }}
        />
        <MainStack.Screen
          name="CreateCustomCategory"
          component={CreateCustomCategory}
          options={{
            ...headerBarOptions('white', ''),
          }}
        />
        <MainStack.Screen
          name="IndividualMoment"
          component={IndividualMoment}
          initialParams={{screenType}}
          options={{
            ...modalStyle,
            gestureEnabled: false,
            ...headerBarOptions('white', ''),
          }}
        />
        <MainStack.Screen
          name="MomentCommentsScreen"
          component={MomentCommentsScreen}
          initialParams={{screenType}}
          options={{
            ...headerBarOptions('black', 'Comments'),
          }}
        />
        <MainStack.Screen
          name="CommentReactionScreen"
          component={CommentReactionScreen}
          options={{
            ...headerBarOptions('black', 'Likes'),
          }}
        />
        <MainStack.Screen
          name="MomentUploadPrompt"
          component={MomentUploadPromptScreen}
          initialParams={{screenType}}
          options={{
            ...modalStyle,
          }}
        />
        <MainStack.Screen
          name="FriendsListScreen"
          component={FriendsListScreen}
          initialParams={{screenType}}
          options={{
            ...headerBarOptions('black', 'Friends'),
          }}
        />
        <MainStack.Screen
          name="InviteFriendsScreen"
          component={InviteFriendsScreen}
          options={{
            ...headerBarOptions('black', 'Invites'),
          }}
        />
        <MainStack.Screen
          name="RequestContactsAccess"
          component={RequestContactsAccess}
          initialParams={{screenType}}
          options={{
            ...modalStyle,
            gestureEnabled: false,
          }}
        />
        <MainStack.Screen
          name="EditProfile"
          component={EditProfile}
          options={{
            ...headerBarOptions('white', 'Edit Profile'),
          }}
        />
        <MainStack.Screen
          name="UpdateSPPicture"
          component={SuggestedPeopleUploadPictureScreen}
          initialParams={{editing: true}}
          options={{
            ...headerBarOptions('white', ''),
          }}
        />
        <MainStack.Screen
          name="BadgeSelection"
          component={BadgeSelection}
          initialParams={{editing: true}}
          options={{
            ...headerBarOptions('white', ''),
          }}
        />
        <MainStack.Screen
          name="MutualBadgeHolders"
          component={MutualBadgeHolders}
          options={{...modalStyle}}
        />
        <MainStack.Screen
          name="SPWelcomeScreen"
          component={SuggestedPeopleWelcomeScreen}
          options={{
            ...headerBarOptions('white', ''),
          }}
        />
        <MainStack.Screen
          name="ChatList"
          component={ChatListScreen}
          options={{headerTitle: 'Chats'}}
        />
        <MainStack.Screen
          name="Chat"
          component={ChatScreen}
          options={{
            ...headerBarOptions('black', ''),
            headerStyle: {height: ChatHeaderHeight},
          }}
        />
        <MainStack.Screen
          name="NewChatModal"
          component={NewChatModal}
          options={{headerShown: false, ...newChatModalStyle}}
        />
        <MainStack.Screen
          name="TagSelectionScreen"
          component={TagSelectionScreen}
          options={{
            ...headerBarOptions('black', ''),
          }}
        />
        <MainStack.Screen
          name="TagFriendsScreen"
          component={TagFriendsScreen}
          options={{
            gestureEnabled: false,
          }}
        />
        <MainStack.Screen
          name="ZoomInCropper"
          component={ZoomInCropper}
          options={{
            ...modalStyle,
            gestureEnabled: false,
          }}
        />
        <MainStack.Screen
          name="CameraScreen"
          component={CameraScreen}
          options={{
            ...modalStyle,
            gestureEnabled: false,
          }}
        />
      </MainStack.Navigator>
    );
  };

  return mainStackScreen();
};

export const headerBarOptions: (
  color: 'white' | 'black',
  title: string,
) => StackNavigationOptions = (color, title) => ({
  headerShown: true,
  headerTransparent: true,
  headerBackTitleVisible: false,
  headerBackImage: () => (
    <BackIcon
      height={normalize(18)}
      width={normalize(18)}
      color={color}
      style={[
        styles.backButton,
        color === 'white' ? styles.backButtonShadow : {},
      ]}
    />
  ),
  headerTitle: () => (
    <Text
      style={[
        styles.headerTitle,
        {color: color},
        {fontSize: title.length > 18 ? normalize(14) : normalize(16)},
      ]}>
      {title}
    </Text>
  ),
});

export const modalStyle: StackNavigationOptions = {
  cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'},
  gestureDirection: 'vertical',
  cardOverlayEnabled: true,
  cardStyleInterpolator: ({current: {progress}}) => ({
    cardStyle: {
      opacity: progress.interpolate({
        inputRange: [0, 0.5, 0.9, 1],
        outputRange: [0, 0.25, 0.7, 1],
      }),
    },
  }),
};

const styles = StyleSheet.create({
  backButton: {
    marginLeft: 30,
  },
  backButtonShadow: {
    shadowColor: 'black',
    shadowRadius: 3,
    shadowOpacity: 0.7,
    shadowOffset: {width: 0, height: 0},
  },
  headerTitle: {
    letterSpacing: normalize(1.3),
    fontWeight: '700',
  },
});

export default MainStackScreen;