import {useCallback, useEffect, useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {RenderSceneProps, TabsChips} from '@components';
import {UseGetInfiniteQueryResponse} from '@config/api/interfaces-v5';
import {TimeOffRequest, TimeOffRole} from '@modules/timeOff/interfaces';
import {useGetPolicyTypes} from '@modules/timeOff/hooks';
import {
  setTimeOffNotifications,
  useCollaboratorNotifications,
} from '@modules/timeOff/store';
import {useInstanceProp} from '@redux/selectors';
import {
  clearModuleNotifications,
  ModulesNotifications,
} from '@shared/notifications';
import {useTheme} from '@shared/theme';

import RequestsList from '../RequestsList';
import TabsPlaceholder from '../TabsPlaceholder';
import CollaboratorCalendar from '../CollaboratorCalendar';

interface Props {
  collaboratorRequestsData: UseGetInfiniteQueryResponse<TimeOffRequest>;
}

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

const PERSONAL_TABS = {
  REQUESTS: 'REQUESTS',
  CALENDAR: 'CALENDAR',
};

function PersonalTimeOff({collaboratorRequestsData}: Props) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const collaboratorNotifications = useCollaboratorNotifications();
  const isVacationPublicCalendarEnabled = useInstanceProp(
    'vacationPublicCalendar',
  );
  const policyTypesData = useGetPolicyTypes();

  useEffect(() => {
    if (collaboratorNotifications) {
      clearModuleNotifications(ModulesNotifications.TIME_OFF, undefined, {
        role: TimeOffRole.COLLABORATOR,
      });
      setTimeOffNotifications({
        vacationRequestsAsCollaboratorNotifications: 0,
      });
    }
  }, [collaboratorNotifications]);

  const routes = useMemo(
    () => [
      {key: PERSONAL_TABS.REQUESTS, label: t('time_off.your_requests')},
      {key: PERSONAL_TABS.CALENDAR, label: t('time_off.calendar')},
    ],
    [t],
  );

  const renderScene = useCallback(
    ({route}: RenderSceneProps) => {
      switch (route.key) {
        case PERSONAL_TABS.REQUESTS:
          return (
            <RequestsList
              isInPersonalSpace
              policyTypesData={policyTypesData}
              requestsData={collaboratorRequestsData}
            />
          );
        case PERSONAL_TABS.CALENDAR:
          return <CollaboratorCalendar />;
        default:
          return null;
      }
    },
    [collaboratorRequestsData, policyTypesData],
  );

  return isVacationPublicCalendarEnabled ? (
    <TabsChips
      routes={routes}
      usePager={false}
      swipeEnabled={false}
      renderLazyPlaceholder={LazyPlaceholder}
      tabsBackgroundColor={theme.background.layout.default}
      renderScene={renderScene}
    />
  ) : (
    <RequestsList
      isInPersonalSpace
      policyTypesData={policyTypesData}
      requestsData={collaboratorRequestsData}
    />
  );
}

export default PersonalTimeOff;