import { FC } from 'react';

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

import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import { DocumentItem } from 'src/pages/dashboard/documents/components/folder';
import { Document } from 'src/types/documents';
import { useLokaliseTranslation } from 'src/utils/i18n';

import InfiniteList, {
  InfiniteListProps,
} from 'src/components/list/InfiniteList';
import { ListProps } from 'src/components/list/List';

import { DocumentListContainer } from '../documents';

export type DocumentListProps = ListProps &
  Pick<
    InfiniteListProps,
    'fetchNextPage' | 'hasNextPage' | 'isFetchingNextPage'
  > & {
    list: Document[];
  };

export const DocumentList: FC<DocumentListProps> = props => {
  const {
    list,
    isLoading,
    isSuccess,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = props;

  const { t } = useLokaliseTranslation('documents');
  const isEmpty = list.length === 0;

  return (
    <DocumentListContainer
      title={t('DOCUMENTS')}
      showOptions
    >
      <InfiniteList
        isSuccess={isSuccess}
        isLoading={isLoading}
        isEmpty={isEmpty}
        fetchNextPage={fetchNextPage}
        hasNextPage={hasNextPage}
        isFetchingNextPage={isFetchingNextPage}
        noResultsLabel={t('EMPTY_DOCUMENT_LIST')}
        loadingSkeleton={isLoading}
        renderSkeleton={
          <Stack sx={{ py: 1 }}>
            <HuListItem loading />
            <HuListItem loading />
            <HuListItem loading />
          </Stack>
        }
      >
        {list?.map((document, index) => (
          <DocumentItem
            key={document.id}
            document={document}
            showDivider={index !== list.length - 1}
          />
        ))}
      </InfiniteList>
    </DocumentListContainer>
  );
};

export default DocumentList;