import {RouteProp} from '@react-navigation/native';
import {StackNavigationOptions} from '@react-navigation/stack';
import React from 'react';
import {
  CaptionScreen,
  CategorySelection,
  CreateCustomCategory,
  EditProfile,
  FriendsListScreen,
  IndividualMoment,
  MomentCommentsScreen,
  MomentUploadPromptScreen,
  NotificationsScreen,
  ProfileScreen,
  SearchScreen,
  SocialMediaTaggs,
} from '../../screens';
import {ScreenType} from '../../types';
import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils';
import {MainStack, MainStackParams} from './MainStackNavigator';

/**
 * 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 isProfileTab = screenType === ScreenType.Profile;
  const isSearchTab = screenType === ScreenType.Search;
  const isNotificationsTab = screenType === ScreenType.Notifications;

  const initialRouteName = (() => {
    switch (screenType) {
      case ScreenType.Profile:
        return 'Profile';
      case ScreenType.Search:
        return 'Search';
      case ScreenType.Notifications:
        return 'Notifications';
    }
  })();

  const modalStyle: StackNavigationOptions = {
    cardStyle: {backgroundColor: 'transparent'},
    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],
        }),
      },
      overlayStyle: {
        backgroundColor: '#505050',
        opacity: progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 0.9],
          extrapolate: 'clamp',
        }),
      },
    }),
  };

  return (
    <MainStack.Navigator
      screenOptions={{
        headerShown: false,
        gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6},
      }}
      mode="card"
      initialRouteName={initialRouteName}>
      <MainStack.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          headerShown: true,
          headerTransparent: true,
          headerBackTitleVisible: false,
          headerTitle: '',
          headerTintColor: 'white',
          headerStyle: {height: AvatarHeaderHeight},
        }}
        initialParams={{
          screenType,
        }}
      />
      {isSearchTab && (
        <MainStack.Screen
          name="Search"
          component={SearchScreen}
          initialParams={{screenType}}
        />
      )}
      {isNotificationsTab && (
        <MainStack.Screen
          name="Notifications"
          component={NotificationsScreen}
          initialParams={{screenType}}
        />
      )}
      <MainStack.Screen
        name="CaptionScreen"
        component={CaptionScreen}
        options={{...modalStyle, gestureEnabled: false}}
      />
      <MainStack.Screen
        name="SocialMediaTaggs"
        component={SocialMediaTaggs}
        options={{
          headerShown: true,
          headerTransparent: true,
          headerBackTitleVisible: false,
          headerTitle: '',
          headerTintColor: 'white',
          headerStyle: {height: AvatarHeaderHeight},
        }}
        initialParams={{screenType}}
      />
      <MainStack.Screen
        name="CategorySelection"
        component={CategorySelection}
        options={{
          headerShown: true,
          headerTransparent: true,
          headerBackTitleVisible: false,
          headerTintColor: 'white',
          headerTitle: '',
        }}
      />
      <MainStack.Screen
        name="CreateCustomCategory"
        component={CreateCustomCategory}
        options={{
          headerShown: true,
          headerTransparent: true,
          headerBackTitleVisible: false,
          headerTintColor: 'white',
          headerTitle: '',
        }}
      />
      <MainStack.Screen
        name="IndividualMoment"
        component={IndividualMoment}
        options={{
          gestureEnabled: false,
          cardStyle: {
            backgroundColor: 'rgba(0, 0, 0, 0.6)',
          },
          cardOverlayEnabled: true,
          cardStyleInterpolator: ({current: {progress}}) => ({
            cardStyle: {
              opacity: progress.interpolate({
                inputRange: [0, 0.5, 0.9, 1],
                outputRange: [0, 0.25, 0.7, 1],
              }),
            },
          }),
        }}
        initialParams={{screenType}}
      />
      <MainStack.Screen
        name="MomentCommentsScreen"
        component={MomentCommentsScreen}
        options={{
          ...modalStyle,
        }}
        initialParams={{screenType}}
      />
      <MainStack.Screen
        name="MomentUploadPrompt"
        component={MomentUploadPromptScreen}
        options={{
          ...modalStyle,
        }}
        initialParams={{screenType}}
      />
      <MainStack.Screen
        name="FriendsListScreen"
        component={FriendsListScreen}
        options={{
          ...modalStyle,
        }}
        initialParams={{screenType}}
      />
      <MainStack.Screen
        name="EditProfile"
        component={EditProfile}
        options={{
          headerShown: true,
          headerTitle: 'Edit Profile',
          headerTransparent: true,
          headerBackTitleVisible: false,
          headerTintColor: 'white',
        }}
      />
    </MainStack.Navigator>
  );
};

export default MainStackScreen;