import React from 'react';
import {StatusBar} from 'react-native';
import Animated from 'react-native-reanimated';
import {Content, Cover, TabsGradient} from '../../components';
import {RouteProp, useFocusEffect} from '@react-navigation/native';
import {ProfileStackParams} from '../../routes/';
import {resetScreenType} from '../../store/actions';
import {useDispatch, useStore} from 'react-redux';
import {DUMMY_USERID} from '../../store/initialStates';

/**r
 * Profile Screen for a user's profile
 * including posts, messaging, and settings
 */

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

interface ProfileOnboardingProps {
  route: ProfileScreenRouteProps;
}

const ProfileScreen: React.FC<ProfileOnboardingProps> = ({route}) => {
  const {screenType} = route.params;
  let {userXId} = route.params;
  const y = Animated.useValue(0);
  const dispatch = useDispatch();

  /**
   * This is a double safety check to avoid app crash.
   * Checks if the required userXId is present in the store, if not userXId is set to dummy id
   */
  if (userXId && !(userXId in useStore().getState().userX[screenType])) {
    userXId = DUMMY_USERID;
  }

  /**
   * Code under useFocusEffect gets executed every time the screen comes under focus / is being viewed by the user.
   * This is done to reset the users stored in our store for the Search screen.
   * Read more about useFocusEffect here : https://reactnavigation.org/docs/function-after-focusing-screen/
   */
  useFocusEffect(() => {
    if (!userXId) {
      dispatch(resetScreenType(screenType));
    }
  });

  return (
    <>
      <StatusBar />
      <Content {...{y, userXId, screenType}} />
      <TabsGradient />
    </>
  );
};

export default ProfileScreen;
