import {
  type FetchNextPageOptions,
  type InfiniteQueryObserverResult,
} from 'react-query';

import HuCircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';
import HuTable from '@material-hu/components/design-system/Table';
import HuTableContainer from '@material-hu/components/design-system/Table/components/TableContainer';

import { type BalanceReport } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { reportBalanceTableHeader } from 'src/utils/vacations';

import InfiniteTable from 'src/components/InfiniteTable';

import { EmptyState } from '../EmptyState/EmptyState';

import ReportBalanceRowContent from './ReportBalanceRowContent';
import ReportBalanceRowHeader from './ReportBalanceRowHeader';

export type ReportBalanceTableProps = {
  reportData: BalanceReport[];
  isLoading: boolean;
  fetchNextPage: (
    options?: FetchNextPageOptions,
  ) => Promise<InfiniteQueryObserverResult<unknown, unknown>>;
  hasNextPage: boolean;
  isFetchingNextPage: boolean;
};

const ReportBalanceTable = (props: ReportBalanceTableProps) => {
  const {
    reportData,
    isLoading,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = props;
  const { t } = useLokaliseTranslation('time_off');
  const totalColumns = reportBalanceTableHeader(t).length;

  return (
    <HuTableContainer>
      <HuTable>
        <ReportBalanceRowHeader />
        <InfiniteTable
          fetchNextPage={fetchNextPage}
          hasNextPage={hasNextPage}
          isFetchingNextPage={isFetchingNextPage}
          isLoading={isLoading}
          totalColumns={totalColumns}
          isEmpty={!reportData?.length}
          renderEmptyState={isLoading ? <HuCircularProgress /> : <EmptyState />}
        >
          {reportData?.map(item => (
            <ReportBalanceRowContent
              key={'user' + item.user.id + 'policy' + item.policy.id}
              reportItem={item}
            />
          ))}
        </InfiniteTable>
      </HuTable>
    </HuTableContainer>
  );
};

export default ReportBalanceTable;