/* eslint-disable react/no-unstable-nested-components */
import React, {memo, useCallback, useEffect, useRef} from 'react';
import {useTranslation} from 'react-i18next';
import {useDispatch} from 'react-redux';
import {
  BottomTabBarProps,
  BottomTabNavigationOptions,
  createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
import {
  IconLayoutGrid,
  IconMessage,
  IconSmartHome,
  IconStar,
  IconUser,
  IconBook,
  IconSparkles,
} from '@tabler/icons-react-native';
import {BottomTabBar, ChatbotScreen, CHATBOT_NAME} from '@components';
import {closeAllSwipeables} from '@components/RNSwipeable';
import {CallStatusBar} from '@modules/calls/components/CallStatusBar';
import {useShowCallStatusBar} from '@modules/calls/store/selectors';
import Chats from '@modules/chat/screens/Chats';
import KudosTabs from '@modules/acknowledgement/screens/KudosTabs';
import {KnowledgeLibraries} from '@modules/libraries/screens/KnowledgeLibraries';
import Home from '@modules/home';
import {setScrollToTop} from '@modules/post/store';
import Profile from '@modules/profile/screens/Profile';
import Widgets from '@modules/widgets/screens/Widgets';
import {ChatHomeScreen} from '@modules/chats/screens/ChatHome';
import {getCurrentRouteName} from '@navigation/navigator';
import {
  AMPLITUDE_APP_MODULES,
  AMPLITUDE_EVENTS,
  Screens,
} from '@shared/constants';
import {useTheme} from '@shared/theme';
import {
  CHATS_TAB_MODULES,
  fetchModulesNotifications,
  logAmplitudeEvent,
} from '@shared/utils';
import {useCommunityFeature} from '@stores/communityFeatures';

import {BottomTabNavigatorParamList} from './interfaces';
import {TAB_NAVIGATOR_OPTIONS} from './constants';
import {useNotifications} from './hooks/useNotifications';
import {useBottomTabPermissions} from './hooks/useBottomTabPermissions';

const Tab = createBottomTabNavigator<BottomTabNavigatorParamList>();

function BottomTabNavigator() {
  const {t} = useTranslation();
  const dispatch = useDispatch();
  const showCallStatusBar = useShowCallStatusBar();
  const deferRedBubbles = useCommunityFeature('DEFER_RED_BUBBLES');
  const hasFetchedDeferredChatBubbles = useRef(false);

  useEffect(() => {
    if (!hasFetchedDeferredChatBubbles.current && deferRedBubbles) {
      fetchModulesNotifications(CHATS_TAB_MODULES);
      hasFetchedDeferredChatBubbles.current = true;
    }
  }, [deferRedBubbles]);

  const {
    chatsNotifications,
    chats2Notifications,
    homeNotifications,
    widgetsNotifications,
  } = useNotifications();
  const {theme} = useTheme();
  const {
    showAcknowledgements,
    showChats,
    showChatsV2,
    showChatbotAI,
    showHome,
    chatsLabel,
    showWidgets,
    ackLabel,
    showKnowledgeLibraries,
    libsLabel,
  } = useBottomTabPermissions();

  const renderTabBar = useCallback(
    (props: BottomTabBarProps) => <BottomTabBar {...props} theme={theme} />,
    [theme],
  );

  return (
    <>
      <CallStatusBar />
      <Tab.Navigator
        tabBar={renderTabBar}
        screenOptions={TAB_NAVIGATOR_OPTIONS}
        screenListeners={{tabPress: closeAllSwipeables}}
        backBehavior="initialRoute">
        {showHome && (
          <Tab.Screen
            name={Screens.HOME}
            component={Home}
            options={{
              title: t('bottomNavbar.home'),
              tabBarIcon: ({color, size}) => (
                <IconSmartHome color={color} size={size} />
              ),
              tabBarBadge: homeNotifications,
              freezeOnBlur: true,
            }}
            listeners={{
              tabPress: () => {
                const route = getCurrentRouteName();

                // Scroll to top on Feed
                if (route === Screens.HOME) {
                  dispatch(setScrollToTop(true));
                }
              },
            }}
          />
        )}
        {showChatsV2 ? (
          <Tab.Screen
            name={Screens.CHAT}
            component={ChatHomeScreen}
            options={{
              title: t('bottomNavbar.chats'),
              tabBarIcon: ({color, size}) => (
                <IconMessage color={color} size={size} />
              ),
              tabBarBadge: chats2Notifications,
              freezeOnBlur: false,
            }}
          />
        ) : showChats ? (
          <Tab.Screen
            name={Screens.CHAT}
            component={Chats}
            options={{
              title: t(chatsLabel),
              tabBarIcon: ({color, size}) => (
                <IconMessage color={color} size={size} />
              ),
              tabBarBadge: chatsNotifications,
            }}
          />
        ) : showChatbotAI ? (
          <Tab.Screen
            name={Screens.CHATBOT_AI}
            component={ChatbotScreen}
            options={{
              title: CHATBOT_NAME,
              tabBarIcon: ({color, size}) => (
                <IconSparkles color={color} size={size} />
              ),
              freezeOnBlur: true,
            }}
          />
        ) : null}
        {showKnowledgeLibraries && (
          <Tab.Screen
            name={Screens.KNOWLEDGE_LIBRARIES}
            component={KnowledgeLibraries}
            options={{
              title: t(libsLabel),
              freezeOnBlur: true,
              tabBarIcon: ({color, size}) => (
                <IconBook color={color} size={size} />
              ),
            }}
          />
        )}
        {showWidgets && (
          <Tab.Screen
            name={Screens.WIDGETS}
            component={Widgets}
            options={{
              title: t('bottomNavbar.apps'),
              tabBarIcon: ({color, size}) => (
                <IconLayoutGrid color={color} size={size} />
              ),
              tabBarBadge: widgetsNotifications,
              freezeOnBlur: true,
            }}
            listeners={{
              tabPress: () => {
                logAmplitudeEvent(AMPLITUDE_EVENTS.TAB_APP_PRESSED);
              },
            }}
          />
        )}
        {showAcknowledgements && (
          <Tab.Screen
            name={Screens.ACKNOWLEDGEMENTS}
            component={KudosTabs}
            options={
              {
                headerShown: true,
                headerStatusBarHeight: showCallStatusBar ? 0 : undefined,
                title: ackLabel,
                tabBarIcon: ({color, size}) => (
                  <IconStar color={color} size={size} />
                ),
                module: AMPLITUDE_APP_MODULES.Acknowledgements,
                freezeOnBlur: true,
              } as BottomTabNavigationOptions
            }
          />
        )}
        <Tab.Screen
          name={Screens.USER_PROFILE}
          component={Profile}
          options={
            {
              title: t('bottomNavbar.profile'),
              tabBarIcon: ({color, size}) => (
                <IconUser color={color} size={size} />
              ),
              module: AMPLITUDE_APP_MODULES.People,
              freezeOnBlur: true,
            } as BottomTabNavigationOptions
          }
        />
      </Tab.Navigator>
    </>
  );
}

export default memo(BottomTabNavigator);