/**
 * @deprecated Compose using `Table` from `@material-hu/components/design-system/Table`
 * and `InfiniteListLoader` from `@material-hu/components/composed-components/InfiniteListLoader`
 * (IntersectionObserver-based load-more trigger).
 */
import { FC, ReactElement, ReactNode, useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import { InfiniteQueryObserverBaseResult } from 'react-query';

import CircularProgress from '@material-hu/mui/CircularProgress';
import TableBody, { TableBodyProps } from '@material-hu/mui/TableBody';
import TableCell from '@material-hu/mui/TableCell';
import TableRow from '@material-hu/mui/TableRow';

export type InfiniteTableProps = TableBodyProps &
  Pick<
    InfiniteQueryObserverBaseResult,
    'isFetchingNextPage' | 'hasNextPage' | 'fetchNextPage'
  > & {
    withEnd?: boolean;
    children: ReactNode;
    totalPages?: number;
    totalColumns: number;
    isEmpty?: boolean;
    isLoading: boolean;
    renderSkeleton?: ReactElement<any, any>;
  };

const InfiniteTable: FC<InfiniteTableProps> = props => {
  const {
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    children,
    isLoading,
    isEmpty,
    renderSkeleton,
    totalColumns,
    ...bodyProps
  } = props;
  const [ref, inView] = useInView({
    threshold: 0,
  });

  useEffect(() => {
    if (inView && hasNextPage && !isEmpty) {
      fetchNextPage();
    }
  }, [inView, hasNextPage, isEmpty]);

  return (
    <TableBody {...bodyProps}>
      {children}
      {!isLoading && hasNextPage && (
        <TableRow
          sx={{ height: '2px' }}
          className="loadingMoreRef"
          ref={ref}
        />
      )}
      {isFetchingNextPage &&
        (renderSkeleton || (
          <TableRow>
            <TableCell
              colSpan={totalColumns}
              sx={{ textAlign: 'center' }}
            >
              <CircularProgress />
            </TableCell>
          </TableRow>
        ))}
    </TableBody>
  );
};

export default InfiniteTable;