import React, {useCallback, useEffect, useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {RenderSceneProps, TabItem, Tabs} from '@components';
import {useModuleName} from '@hooks/useModuleName';
import {useGetSubordinates} from '@hooks/useGetSubordinates';
import {Navigation} from '@interfaces/navigation';
import {useGetTimeOffData} from '@modules/timeOff/hooks';
import {
  resetManagerFilters,
  useCollaboratorNotifications,
  useManagerNotifications,
} from '@modules/timeOff/store';
import {usePermission} from '@redux/selectors';
import {Screens} from '@shared/constants';
import {capitalize, fetchModulesNotifications} from '@shared/utils';
import {ModulesNotifications} from '@shared/notifications';

import PersonalTimeOff from './components/PersonalTimeOff';
import ManagementTimeOff from './components/ManagementTimeOff';
import TabsPlaceholder from './components/TabsPlaceholder';

const LazyPlaceholder = () => <TabsPlaceholder />;

function TimeOff({navigation}: Navigation<Screens.TIME_OFF>) {
  const {t} = useTranslation();
  const collaboratorNotifications = useCollaboratorNotifications();
  const managerNotifications = useManagerNotifications();
  const moduleName = useModuleName({moduleName: 'TIME_OFF'});
  const isAdmin = usePermission('MANAGE_VACATIONS');
  const {isManager} = useGetSubordinates(!isAdmin);
  const {
    collaboratorRequestsData,
    hasManagementRequests,
    managementRequestsData,
  } = useGetTimeOffData();

  const showBalances = useMemo(
    () => isAdmin || isManager,
    [isAdmin, isManager],
  );
  const showManagementTab = useMemo(
    () => showBalances || hasManagementRequests,
    [hasManagementRequests, showBalances],
  );

  useEffect(() => {
    if (moduleName) {
      navigation.setOptions({title: capitalize(moduleName, false)!});
    }
  }, [moduleName, navigation]);

  useEffect(() => {
    fetchModulesNotifications([ModulesNotifications.TIME_OFF]);
    return () => {
      resetManagerFilters();
    };
  }, []);

  const routes: TabItem[] = useMemo(
    () => [
      {
        key: Screens.PERSONAL_TIME_OFF,
        label: t('time_off.personal_space'),
        badge: !!collaboratorNotifications,
      },
      {
        key: Screens.MANAGEMENT_TIME_OFF,
        label: t('time_off.management'),
        badge: !!managerNotifications,
      },
    ],
    [collaboratorNotifications, managerNotifications, t],
  );

  const renderScene = useCallback(
    ({route}: RenderSceneProps) => {
      switch (route.key) {
        case Screens.PERSONAL_TIME_OFF:
          return (
            <PersonalTimeOff
              collaboratorRequestsData={collaboratorRequestsData}
            />
          );
        case Screens.MANAGEMENT_TIME_OFF:
          return (
            <ManagementTimeOff
              managementRequestsData={managementRequestsData}
              showBalances={showBalances}
            />
          );
        default:
          return null;
      }
    },
    [collaboratorRequestsData, managementRequestsData, showBalances],
  );

  return showManagementTab ? (
    <Tabs
      animationEnabled={false}
      swipeEnabled={false}
      renderLazyPlaceholder={LazyPlaceholder}
      renderScene={renderScene}
      routes={routes}
    />
  ) : (
    <PersonalTimeOff collaboratorRequestsData={collaboratorRequestsData} />
  );
}

export default TimeOff;