import { useGetBalanceReport } from 'src/hooks/queryHooks/vacations';
import useLogEventInViewVisited from 'src/hooks/useLogEventInViewVisited';
import { EventName } from 'src/types/amplitude';
import { ReportType } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

export type ManagerViewBalancesProps = {
  filters: VacationsFilterReturn;
};

const ManagerViewBalances = (props: ManagerViewBalancesProps) => {
  const { filters } = props;

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

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

  useLogEventInViewVisited({
    properties: count ? { usersCount: count } : undefined,
    amplitudeEvent: EventName.TIME_OFF_MANAGE_BALANCE_TAB_VISITED,
  });
  return (
    <>
      <ManagerViewHeader
        title={t('balance_report')}
        filters={filters}
        countRequestManager={count || 0}
        reportType={ReportType.BALANCES}
      />
      <ReportBalanceTable
        reportData={data || []}
        isLoading={isLoading}
        fetchNextPage={fetchNextPage}
        hasNextPage={hasNextPage ?? false}
        isFetchingNextPage={isFetchingNextPage}
      />
    </>
  );
};

export default ManagerViewBalances;