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

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: '#808080',
            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',
          headerTitle: () => <AvatarTitle isProfileView={isProfileView} />,
        }}
      />
      {!isProfileView ? (
        <ProfileStack.Screen name="CaptionScreen" component={CaptionScreen} />
      ) : (
        <React.Fragment />
      )}
      <ProfileStack.Screen
        name="IndividualMoment"
        component={IndividualMoment}
        options={{headerShown: false}}
        initialParams={{isProfileView: isProfileView}}
      />
    </ProfileStack.Navigator>
  );
};

export default Profile;