import Typography from '@material-hu/mui/Typography';

import HuTable from '@material-hu/components/design-system/Table';
import HuTableBody from '@material-hu/components/design-system/Table/components/TableBody';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableContainer from '@material-hu/components/design-system/Table/components/TableContainer';
import HuTableHead from '@material-hu/components/design-system/Table/components/TableHead';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

import { useGetBalanceConformation } from 'src/hooks/queryHooks/vacations';
import { type MeUser } from 'src/types/user';
import { type ResponseDetailPolicyTypes } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { InfiniteList } from 'src/components/list';

import { BalanceConformationItem } from '../policyTypes';

type BalanceConformationCurrentProps = {
  userCollaborator?: MeUser;
  policyTypeDetail: ResponseDetailPolicyTypes;
};

export const BalanceConformationCurrent = ({
  policyTypeDetail,
  userCollaborator,
}: BalanceConformationCurrentProps) => {
  const { t } = useLokaliseTranslation('time_off');
  const userCollaboratorId = userCollaborator?.id;

  const { data, fetchNextPage, isFetchingNextPage, isLoading, hasNextPage } =
    useGetBalanceConformation(policyTypeDetail.id, userCollaboratorId!);

  const columns = [
    { id: 'CYCLE', label: t('general:cycle') },
    { id: 'BALANCE', label: t('BALANCE') },
  ];

  return (
    <InfiniteList
      fetchNextPage={fetchNextPage}
      hasNextPage={hasNextPage}
      isFetchingNextPage={isFetchingNextPage}
      isSuccess={!!data}
      isLoading={isLoading}
    >
      <HuTableContainer>
        <HuTable>
          <HuTableHead>
            <HuTableRow headerRow>
              {columns.map(column => (
                <HuTableCell key={column.id}>
                  <Typography
                    variant="globalS"
                    fontWeight="fontWeightSemiBold"
                  >
                    {column.label}
                  </Typography>
                </HuTableCell>
              ))}
            </HuTableRow>
          </HuTableHead>
          <HuTableBody>
            {data?.map(balanceData => (
              <BalanceConformationItem
                key={balanceData.id}
                balanceData={balanceData}
                policyUnit={policyTypeDetail.unit}
              />
            ))}
          </HuTableBody>
        </HuTable>
      </HuTableContainer>
    </InfiniteList>
  );
};