import { useCallback, useRef } from 'react';

import useVirtualizer from '@material-hu/hooks/useVirtualizer';
import Stack from '@material-hu/mui/Stack';

import StateCard from '@material-hu/components/design-system/StateCard';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { ACKNOWLEDGEMENT_ROW_HEIGHT_ESTIMATE } from '../../constants';
import { useGetAcknowledgements } from '../../hooks/useGetAcknowledgements';
import { useKudosFeedCategoryId } from '../../hooks/useKudosFeedCategoryId';
import AcknowledgementCard from '../AcknowledgementCard';
import { AcknowledgementCreateCard } from '../AcknowledgementCreateCard';
import { AcknowledgementEmptyState } from '../AcknowledgementEmptyState';

import { KudosListVirtualized } from './KudosListVirtualized';

const estimateRowSize = () => ACKNOWLEDGEMENT_ROW_HEIGHT_ESTIMATE;

export const KudosList = () => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const [selectedCategoryId] = useKudosFeedCategoryId();
  const scrollElementRef = useRef<HTMLElement | null>(null);

  const {
    acknowledgements,
    isEmpty,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    fetchNextPage,
  } = useGetAcknowledgements(selectedCategoryId);

  const getItemKey = useCallback(
    (index: number) => acknowledgements[index]?.id ?? index,
    [acknowledgements],
  );

  const { virtualRows, rowVirtualizer } = useVirtualizer({
    scrollElementRef,
    withWindowScroll: true,
    registers: acknowledgements,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
    virtualizerOptions: {
      count: acknowledgements.length,
      estimateSize: estimateRowSize,
      getItemKey,
      getScrollElement: () => scrollElementRef.current,
    },
  });

  const hasAcknowledgements = acknowledgements.length > 0;
  const isListReady = hasAcknowledgements && virtualRows.length > 0;
  const showSkeleton = isLoading || (hasAcknowledgements && !isListReady);

  if (isEmpty && selectedCategoryId === null) {
    return <AcknowledgementEmptyState />;
  }

  return (
    <Stack
      sx={{
        minWidth: 300,
        width: '100%',
        maxWidth: 550,
      }}
    >
      <AcknowledgementCreateCard />
      {hasAcknowledgements ? (
        <Stack sx={{ position: 'relative' }}>
          <Stack sx={{ visibility: isListReady ? 'visible' : 'hidden' }}>
            <KudosListVirtualized
              acknowledgements={acknowledgements}
              virtualRows={virtualRows}
              rowVirtualizer={rowVirtualizer}
            />
          </Stack>
          {showSkeleton && (
            <Stack
              sx={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                zIndex: 1,
              }}
            >
              <AcknowledgementCard isLoading />
            </Stack>
          )}
        </Stack>
      ) : (
        showSkeleton && <AcknowledgementCard isLoading />
      )}
      {!showSkeleton && isEmpty && selectedCategoryId !== null && (
        <StateCard
          variant="primary"
          title={t('empty.filters.title')}
          description={t('empty.filters.description')}
          slotProps={{
            card: {
              sx: { border: 'none', py: 2, px: 1 },
            },
          }}
        />
      )}
    </Stack>
  );
};
