import {useEffect, useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {RenderSceneProps, TabItem, Tabs} from '@components';
import {queryClient} from '@config/queryClient';
import {TIME_TRACKING_QUERY_KEYS} from '@modules/timeTracking/constants';
import {OvertimeRequestsTab} from '@modules/timeTracking/interfaces';
import {
  useRequestsFiltersActions,
  useSelectedFiltersActions,
} from '@modules/timeTracking/store';

import RequestsList from './components/RequestsList';

const renderScene = ({route}: RenderSceneProps) => {
  switch (route.key) {
    case OvertimeRequestsTab.PENDING_REQUESTS:
      return <RequestsList isPending />;
    case OvertimeRequestsTab.HISTORY_REQUESTS:
      return <RequestsList />;
    default:
      return null;
  }
};

// TODO: Update module name from Overtime Requests to Categorized Hours (correct naming)
function OvertimeRequests() {
  const {t} = useTranslation();
  const {clearRequestsFilters} = useRequestsFiltersActions();
  const {clearSelectedFilters} = useSelectedFiltersActions();

  useEffect(() => {
    return () => {
      clearRequestsFilters();
      clearSelectedFilters();
    };
  }, [clearRequestsFilters, clearSelectedFilters]);

  const pendingRequestsAmount = !!queryClient.getQueryData<{amount: number}>(
    TIME_TRACKING_QUERY_KEYS.pendingOvertimeRequestsAmount,
  )?.amount;

  const routes: TabItem[] = useMemo(
    () => [
      {
        key: OvertimeRequestsTab.PENDING_REQUESTS,
        label: t('general.pendings'),
        badge: pendingRequestsAmount,
      },
      {
        key: OvertimeRequestsTab.HISTORY_REQUESTS,
        label: t('time_tracker.processed'),
      },
    ],
    [pendingRequestsAmount, t],
  );

  return (
    <Tabs
      fullWidth
      lazy
      swipeEnabled
      withDivider
      renderScene={renderScene}
      routes={routes}
    />
  );
}

export default OvertimeRequests;