import React from 'react';
import {
  IndividualMoment,
  CaptionScreen,
  SocialMediaTaggs,
  SearchScreen,
  ProfileScreen,
  MomentCommentsScreen,
  FollowersListScreen,
} from '../../screens';
import {ProfileStack, ProfileStackParams} from './ProfileStack';
import {RouteProp} from '@react-navigation/native';

/**
 * What will be the First Screen of the stack depends on value of isProfileView (Search if its true else Profile)
 * Trying to explain the purpose of each route on the stack (ACTUALLY A STACK)
 * Profile : To display the logged in user's profile when isProfileView is false, else displays profile of any user the logged in user wants to view.
 * ProfileView : To display profile of a commenter / any user who has commented on a photo.
 * When you click on the profile icon after looking at a user's profile, the stack is reset and you come back to the top of the stack (First screen : Profile in this case)
 * Search : To display the search screen. Search for a user on this screen, click on a result tile and navigate to the same (isProfileView = true).
 * 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.
 */

type ProfileStackRouteProps = RouteProp<ProfileStackParams, 'Profile'>;

interface ProfileStackProps {
  route: ProfileStackRouteProps;
}

const Profile: React.FC<ProfileStackProps> = ({route}) => {
  const {isProfileView} = route.params;
  return (
    <ProfileStack.Navigator
      screenOptions={{
        headerShown: false,
        cardStyle: {backgroundColor: 'transparent'},
        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',
            }),
          },
        }),
      }}
      mode="modal"
      initialRouteName={!isProfileView ? 'Profile' : 'Search'}>
      <ProfileStack.Screen
        name="Profile"
        component={ProfileScreen}
        options={{headerShown: false}}
        initialParams={{isProfileView: isProfileView}}
      />
      {isProfileView ? (
        <ProfileStack.Screen name="Search" component={SearchScreen} />
      ) : (
        <React.Fragment />
      )}
      <ProfileStack.Screen
        name="SocialMediaTaggs"
        component={SocialMediaTaggs}
        options={{
          headerShown: true,
          headerTransparent: true,
          headerBackTitleVisible: false,
          headerTintColor: 'white',
        }}
      />
      {!isProfileView ? (
        <ProfileStack.Screen name="CaptionScreen" component={CaptionScreen} />
      ) : (
        <React.Fragment />
      )}
      <ProfileStack.Screen
        name="IndividualMoment"
        component={IndividualMoment}
        options={{headerShown: false}}
        initialParams={{isProfileView: isProfileView}}
      />
      <ProfileStack.Screen
        name="ProfileView"
        component={ProfileScreen}
        options={{headerShown: false}}
        initialParams={{isProfileView: isProfileView}}
      />
      <ProfileStack.Screen
        name="MomentCommentsScreen"
        component={MomentCommentsScreen}
        options={{headerShown: false}}
        initialParams={{isProfileView: isProfileView}}
      />
      <ProfileStack.Screen
        name="FollowersListScreen"
        component={FollowersListScreen}
        initialParams={{isProfileView: isProfileView}}
      />
    </ProfileStack.Navigator>
  );
};

export default Profile;