import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import React, {Fragment, useEffect, useState} from 'react';
import {useSelector} from 'react-redux';
import {NavigationIcon} from '../../components';
import {NO_NOTIFICATIONS} from '../../store/initialStates';
import {RootState} from '../../store/rootReducer';
import {setNotificationsReadDate} from '../../services';
import {ScreenType} from '../../types';
import {haveUnreadNotifications, isIPhoneX} from '../../utils';
import MainStackScreen from '../main/MainStackScreen';
import {NotificationPill} from '../../components/notifications';

const Tabs = createBottomTabNavigator();

const NavigationBar: React.FC = () => {
  const {isOnboardedUser, newNotificationReceived} = useSelector(
    (state: RootState) => state.user,
  );

  const {notifications: {notifications} = NO_NOTIFICATIONS} = useSelector(
    (state: RootState) => state,
  );
  // Triggered if user clicks on Notifications page to close the pill
  const [showIcon, setShowIcon] = useState<boolean>(true);

  const [unreadNotificationsPresent, setUnreadNotificationsPresent] =
    useState<boolean>(false);

  // Prior to pill inclusion, determines if notification bell
  // should have purple dot
  useEffect(() => {
    const determine = async () => {
      setUnreadNotificationsPresent(
        await haveUnreadNotifications(notifications),
      );
    };
    determine();
  }, [notifications]);

  return (
    <>
      <NotificationPill showIcon={showIcon} />
      <Tabs.Navigator
        screenOptions={({route}) => ({
          tabBarIcon: ({focused}) => {
            switch (route.name) {
              case 'Home':
                return <NavigationIcon tab="Home" disabled={!focused} />;
              case 'Chat':
                return <NavigationIcon tab="Chat" disabled={!focused} />;
              case 'Upload':
                return (
                  <NavigationIcon
                    tab="Upload"
                    disabled={!focused}
                    isBigger={true}
                  />
                );
              case 'Notifications':
                return (
                  <NavigationIcon
                    newIcon={
                      newNotificationReceived || unreadNotificationsPresent
                    }
                    tab="Notifications"
                    disabled={!focused}
                  />
                );
              case 'ProfileTab':
                return <NavigationIcon tab="Profile" disabled={!focused} />;
              case 'SuggestedPeople':
                return (
                  <NavigationIcon tab="SuggestedPeople" disabled={!focused} />
                );
              default:
                return <Fragment />;
            }
          },
        })}
        initialRouteName={isOnboardedUser ? 'Profile' : 'SuggestedPeople'}
        tabBarOptions={{
          showLabel: false,
          style: {
            backgroundColor: 'transparent',
            position: 'absolute',
            borderTopWidth: 0,
            height: isIPhoneX() ? 85 : 55,
          },
        }}>
        <Tabs.Screen
          name="SuggestedPeople"
          component={MainStackScreen}
          initialParams={{screenType: ScreenType.SuggestedPeople}}
        />
        <Tabs.Screen
          name="Chat"
          component={MainStackScreen}
          initialParams={{screenType: ScreenType.Chat}}
        />
        <Tabs.Screen
          name="Upload"
          component={MainStackScreen}
          initialParams={{screenType: ScreenType.Upload}}
        />
        <Tabs.Screen
          name="Notifications"
          component={MainStackScreen}
          initialParams={{screenType: ScreenType.Notifications}}
          listeners={{
            tabPress: (_) => {
              // Closes the pill once this screen has been opened
              setShowIcon(false);
              // Updates backend's date of reading notifications
              setNotificationsReadDate();
            },
          }}
        />
        <Tabs.Screen
          name="ProfileTab"
          component={MainStackScreen}
          initialParams={{screenType: ScreenType.Profile}}
        />
      </Tabs.Navigator>
    </>
  );
};

export default NavigationBar;