import { useEffect } from 'react';
import { useInView } from 'react-intersection-observer';

import { IconFilterX } from '@material-hu/icons/tabler';
import TableCell from '@material-hu/mui/TableCell';
import TableRow from '@material-hu/mui/TableRow';

import HuTable from '@material-hu/components/design-system/Table';
import HuTableBody from '@material-hu/components/design-system/Table/components/TableBody';
import HuTableContainer from '@material-hu/components/design-system/Table/components/TableContainer';

import RequestCalendarRowContent from 'src/pages/dashboard/timeOff/components/calendar/RequestCalendarRowContent';
import RequestCalendarRowHeader from 'src/pages/dashboard/timeOff/components/calendar/RequestCalendarRowHeader';
import { type CalendarRequests } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

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

import EmptyTableState from './EmptyState/EmptyTableState';

export type RequestCalendarTableProps = Pick<
  InfiniteListProps,
  'fetchNextPage' | 'hasNextPage' | 'isFetchingNextPage' | 'isLoading'
> & {
  requestsCalendar: CalendarRequests[];
  month: Date;
  count: number;
};

const RequestCalendarTable = (props: RequestCalendarTableProps) => {
  const {
    month,
    requestsCalendar,
    hasNextPage,
    fetchNextPage,
    isLoading,
    isFetchingNextPage,
    count,
  } = props;

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

  const [loadMoreRef, inViewLoadMoreRef] = useInView({
    threshold: 0.3,
  });

  useEffect(() => {
    if (inViewLoadMoreRef && hasNextPage && !isFetchingNextPage) {
      fetchNextPage?.();
    }
  }, [inViewLoadMoreRef, hasNextPage, isFetchingNextPage, fetchNextPage]);

  return (
    <HuTableContainer
      sx={{
        minHeight: 0,
        maxHeight: 'calc(100vh - 280px)',
        borderRadius: 0,
        border: 'none',
      }}
    >
      <HuTable stickyHeader>
        <RequestCalendarRowHeader
          month={month}
          noRequestsInMonth={!requestsCalendar?.length}
          count={count}
        />
        <HuTableBody>
          {!!requestsCalendar?.length && (
            <>
              {requestsCalendar?.map((request, index) => (
                <RequestCalendarRowContent
                  key={`${getFullName(request.user)}-${index}`}
                  month={month}
                  requestCalendar={request}
                />
              ))}
              {!(isLoading || isFetchingNextPage) && hasNextPage && (
                <TableRow ref={loadMoreRef}>
                  <TableCell sx={{ p: 0.5 }} />
                </TableRow>
              )}
            </>
          )}
          {!requestsCalendar?.length && (
            <EmptyTableState
              titleProps={{
                title: t('NO_RESULTS_SEARCH_FILTERS'),
              }}
              totalColumns={14}
              Icon={IconFilterX}
            />
          )}
        </HuTableBody>
      </HuTable>
    </HuTableContainer>
  );
};

export default RequestCalendarTable;
