import { useGetRequestsReportManager } from 'src/hooks/queryHooks/vacations';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useLogEventInViewVisited from 'src/hooks/useLogEventInViewVisited';
import { RequestsTable } from 'src/pages/dashboard/timeOff/components/requestReport';
import { EventName } from 'src/types/amplitude';
import { ReportType } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

import ManagerViewHeader from './shared/ManagerViewHeader';
import { type VacationsFilterReturn } from './shared/useVacationsFilter';

export type ManagerViewRequestsProps = {
  filters: VacationsFilterReturn;
};

const ManagerViewRequests = (props: ManagerViewRequestsProps) => {
  const { filters } = props;
  const HuGoThemeProvider = useHuGoTheme();

  const { t } = useLokaliseTranslation('time_off');

  const {
    data,
    countRequest,
    isLoading,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useGetRequestsReportManager(filters.values);

  useLogEventInViewVisited({
    properties: countRequest ? { usersCount: countRequest } : undefined,
    amplitudeEvent: EventName.TIME_OFF_MANAGE_REQUESTS_TAB_VISITED,
  });

  return (
    <HuGoThemeProvider>
      <ManagerViewHeader
        title={t('TIME_OFF_MANAGEMENT')}
        filters={filters}
        countRequestManager={countRequest}
        reportType={ReportType.REQUESTS}
      />

      <RequestsTable
        isManagerView
        vacationData={data}
        countRequest={countRequest}
        isLoading={isLoading}
        fetchNextPage={fetchNextPage}
        hasNextPage={hasNextPage || false}
        isFetchingNextPage={isFetchingNextPage}
      />
    </HuGoThemeProvider>
  );
};

export default ManagerViewRequests;