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

const Routes: React.FC = () => {
  const {
    user: {userId},
  } = useSelector((state: RootState) => state.user);
  const [newVersionAvailable, setNewVersionAvailable] = useState(false);
  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();
    }
  });

  useEffect(() => {
    const checkVersion = async () => {
      const liveVersion = await getLiveVersion();
      if (liveVersion && liveVersion !== DeviceInfo.getVersion()) {
        setNewVersionAvailable(true);
        dispatch(updateNewVersionAvailable(true));
      }
    };
    checkVersion();
  });

  return userId && !newVersionAvailable ? <NavigationBar /> : <Onboarding />;
};

export default Routes;
