import React, {useEffect} from 'react';
import NavigationBar from './tabs';
import Onboarding from './onboarding';
import {useSelector, useDispatch} from 'react-redux';
import {RootState} from '../store/rootReducer';
import {userLogin} from '../utils';
import SplashScreen from 'react-native-splash-screen';
import messaging from '@react-native-firebase/messaging';
import {updateNewNotificationReceived} from '../store/actions';
import {fcmService} from '../services';

const Routes: React.FC = () => {
  const {
    user: {userId},
  } = useSelector((state: RootState) => state.user);
  const dispatch = useDispatch();

  /**
   * Load the user from AsyncStorage if any
   * Note that this makes logout triggered by invalid Token have no effect.
   * We should figure out a way to handle that.
   * Suggestions?
   * NOTE : Not something introduced by this commit but something we already have.
   */

  /**
   * SplashScreen is the actual react-native's splash screen.
   * We can hide / show it depending on our application needs.
   */

  useEffect(() => {
    messaging().onMessage(() => {
      dispatch(updateNewNotificationReceived(true));
    });

    if (!userId) {
      userLogin(dispatch, {userId: '', username: ''});
    } else {
      SplashScreen.hide();
    }
  }, [dispatch, userId]);

  useEffect(() => {
    if (userId) {
      fcmService.setUpPushNotifications();
      fcmService.sendFcmTokenToServer();
    }
  });

  return userId ? <NavigationBar /> : <Onboarding />;
};

export default Routes;