import React from 'react';
import DocumentsListItem from 'app/modules/documents/components/documentsListItem';
import {
  documentsAddBookmarkRequest,
  documentsRemoveBookmarkRequest,
  getDocumentFile,
  setDocumentsCollectionLimit,
} from '../store/documents.actions';
import { useDispatch, useSelector } from 'react-redux';
import {
  selectDocumentBookmarks,
  selectDocumentsIsMoreStatus,
  selectDocumentsLoadingStatus,
  selectDocumentsViewList,
} from '../store/documents.selectors';
import Button from '../../../shared/components/button/button';
import * as Text from '../../../shared/components/text/text';

const DocumentsList = () => {
  const dispatch = useDispatch();

  const loadMore = () => dispatch(setDocumentsCollectionLimit());
  const downloadDocumentFile = (documentId: number) => dispatch(getDocumentFile(documentId));
  const addBookmark = (documentId: number) => dispatch(documentsAddBookmarkRequest(documentId));
  const removeBookmark = (documentId: number) => dispatch(documentsRemoveBookmarkRequest(documentId));

  const documents = useSelector(selectDocumentsViewList);
  const isLoading = useSelector(selectDocumentsLoadingStatus);
  const isMore = useSelector(selectDocumentsIsMoreStatus);
  const bookmarks = useSelector(selectDocumentBookmarks);


  return <div>
    <div className="u-margin-bottom--enormous">
      {documents.map((item) => <DocumentsListItem
        key={item.id}
        document={item}
        getDocumentFile={(documentId) => downloadDocumentFile(documentId)}
        isBookmarked={bookmarks.includes(item.id)}
        onBookmarkAdd={addBookmark}
        onBookmarkRemove={removeBookmark}
      />)}
    </div>
    {isMore && <div className="u-align--center`">
      <Button border onClick={loadMore} disabled={isLoading}>
        <Text.Link extraClass='c-button--border-text'>
          Load more
        </Text.Link>
      </Button>
    </div>}
  </div>;
};

export default DocumentsList;