import { type FC, useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import { type InfiniteQueryObserverBaseResult } from 'react-query';

import { IconInfoSquareRounded } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import CircularProgress from '@material-hu/mui/CircularProgress';
import Paper from '@material-hu/mui/Paper';
import Stack from '@material-hu/mui/Stack';

import HuStateCard from '@material-hu/components/composed-components/StateCard';
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 { useLokaliseTranslation } from 'src/utils/i18n';

import { type CsatRating } from '../../types';

import CsatTableSkeleton from './CsatTableSkeleton';

type Props = Pick<
  InfiniteQueryObserverBaseResult,
  'fetchNextPage' | 'hasNextPage' | 'isFetchingNextPage'
> & {
  ratings: CsatRating[];
  loading: boolean;
};

const CsatTable: FC<Props> = ({
  loading,
  ratings,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
}) => {
  const { t } = useLokaliseTranslation('service_management');

  const [sentinelRef, inView] = useInView({
    threshold: 0,
    rootMargin: '200px 0px',
  });

  useEffect(() => {
    if (inView && hasNextPage && ratings.length > 0 && !isFetchingNextPage) {
      fetchNextPage();
    }
  }, [inView, hasNextPage, ratings.length, isFetchingNextPage, fetchNextPage]);

  if (loading) {
    return <CsatTableSkeleton />;
  }

  return (
    <Stack sx={{ gap: '20px' }}>
      <HuTableContainer
        component={Paper}
        sx={{ boxShadow: 'unset' }}
      >
        <HuTable sx={{ minWidth: 650 }}>
          <HuTableHead>
            <HuTableRow headerRow>
              <HuTableCell
                headerCell
                width={131}
              >
                {t('RATING')}
              </HuTableCell>
              <HuTableCell headerCell> {t('COMMENT')}</HuTableCell>
            </HuTableRow>
          </HuTableHead>
          <HuTableBody>
            {ratings.length > 0 &&
              ratings.map(rating => (
                <HuTableRow key={rating.id}>
                  <HuTableCell
                    width={131}
                    component="th"
                    scope="row"
                  >
                    {rating.rating}
                  </HuTableCell>
                  <HuTableCell>{rating.comment}</HuTableCell>
                </HuTableRow>
              ))}
            {ratings.length === 0 && (
              <HuTableRow>
                <HuTableCell colSpan={2}>
                  <HuStateCard
                    slotProps={{
                      title: {
                        title: t('no_results_for_selection'),
                        description: t('no_results_for_selection_description'),
                      },
                      avatar: {
                        Icon: IconInfoSquareRounded,
                        color: 'primary',
                      },
                    }}
                    sx={{ border: 'none' }}
                  />
                </HuTableCell>
              </HuTableRow>
            )}
          </HuTableBody>
        </HuTable>
        <Box
          ref={sentinelRef}
          sx={{ height: 0 }}
        />
      </HuTableContainer>
      {isFetchingNextPage && (
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 1 }}>
          <CircularProgress size={24} />
        </Box>
      )}
    </Stack>
  );
};

export default CsatTable;