import AsyncStorage from '@react-native-community/async-storage';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationOptions} from '@react-navigation/stack';
import React, {useEffect, useState} from 'react';
import {StyleSheet, Text} from 'react-native';
import {normalize} from 'react-native-elements';
import BackIcon from '../../assets/icons/back-arrow.svg';
import {
  AnimatedTutorial,
  BadgeSelection,
  CaptionScreen,
  CategorySelection,
  CreateCustomCategory,
  EditProfile,
  FriendsListScreen,
  IndividualMoment,
  MomentCommentsScreen,
  MomentUploadPromptScreen,
  NotificationsScreen,
  ProfileScreen,
  RequestContactsAccess,
  SearchScreen,
  SocialMediaTaggs,
  SuggestedPeopleScreen,
  SuggestedPeopleUploadPictureScreen,
} 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 isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople;
  const [respondedToAccessContacts, setRespondedToAccessContacts] = useState(
    'true',
  );

  const loadResponseToAccessContacts = () => {
    AsyncStorage.getItem('respondedToAccessContacts')
      .then((value) => {
        setRespondedToAccessContacts(value ? value : 'false');
      })
      .catch((error) => {
        console.log('Something went wrong', error);
        setRespondedToAccessContacts('true');
      });
  };

  loadResponseToAccessContacts();

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

  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],
        }),
      },
    }),
  };

  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', ''),
        }}
      />
      {isSearchTab &&
        (respondedToAccessContacts && respondedToAccessContacts === 'true' ? (
          <MainStack.Screen
            name="Search"
            component={SearchScreen}
            initialParams={{screenType}}
          />
        ) : (
          <MainStack.Screen
            name="Search"
            component={RequestContactsAccess}
            initialParams={{screenType}}
          />
        ))}
      {isNotificationsTab && (
        <MainStack.Screen
          name="Notifications"
          component={NotificationsScreen}
          initialParams={{screenType}}
        />
      )}
      {isSuggestedPeopleTab && (
        <MainStack.Screen
          name="SuggestedPeople"
          component={SuggestedPeopleScreen}
          initialParams={{screenType}}
        />
      )}
      <MainStack.Screen
        name="AnimatedTutorial"
        component={AnimatedTutorial}
        options={{
          ...tutorialModalStyle,
        }}
        initialParams={{screenType}}
      />
      <MainStack.Screen
        name="CaptionScreen"
        component={CaptionScreen}
        options={{
          ...modalStyle,
          gestureEnabled: false,
        }}
      />
      <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,
        }}
      />
      <MainStack.Screen
        name="MomentCommentsScreen"
        component={MomentCommentsScreen}
        initialParams={{screenType}}
        options={{
          ...headerBarOptions('black', 'Comments'),
        }}
      />
      <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="EditProfile"
        component={EditProfile}
        options={{
          ...headerBarOptions('white', 'Edit Profile'),
        }}
      />
      <MainStack.Screen
        name="UpdateSPPicture"
        component={SuggestedPeopleUploadPictureScreen}
        initialParams={{goTo: 'Profile'}}
        options={{
          ...headerBarOptions('white', ''),
        }}
      />
      <MainStack.Screen
        name="Badge"
        component={BadgeSelection}
        options={{
          ...headerBarOptions('white', ''),
        }}
      />
    </MainStack.Navigator>
  );
};

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}
    />
  ),
  headerTitle: () => (
    <Text style={[styles.headerTitle, {color: color}]}>{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,
  },
  headerTitle: {
    fontSize: normalize(16),
    letterSpacing: normalize(1.3),
    fontWeight: '700',
  },
  whiteHeaderTitle: {
    fontSize: normalize(16),
    letterSpacing: normalize(1.3),
    fontWeight: '700',
    color: 'white',
  },
  blackHeaderTitle: {
    fontSize: normalize(16),
    letterSpacing: normalize(1.3),
    fontWeight: '700',
    color: 'black',
  },
});

export default MainStackScreen;