FileList.jsx

import { useRef } from "react";
import FileItem from "./FileItem";
import { useFileNavigation } from "../../contexts/FileNavigationContext";
import { useLayout } from "../../contexts/LayoutContext";
import ContextMenu from "../../components/ContextMenu/ContextMenu";
import { useDetectOutsideClick } from "../../hooks/useDetectOutsideClick";
import useFileList from "./useFileList";
import FilesHeader from "./FilesHeader";
import "./FileList.scss";
import Button from "../../components/Button/Button";
import { MdOutlineFileDownload } from "react-icons/md";

const FileList = ({
  onCreateFolder,
  onRename,
  onFileOpen,
  onRefresh,
  enableFilePreview,
  triggerAction,
  onSelectFolder,
  permissions,
  lazyLoading,
  loadMoreFiles,
  currentTotal,
  currentFetched,
  isLoading
}) => {
  const { currentPathFiles } = useFileNavigation();
  const filesViewRef = useRef(null);
  const { activeLayout } = useLayout();

  const {
    emptySelecCtxItems,
    selecCtxItems,
    handleContextMenu,
    unselectFiles,
    visible,
    setVisible,
    setLastSelectedFile,
    selectedFileIndexes,
    clickPosition,
    isSelectionCtx,
  } = useFileList(onRefresh, enableFilePreview, triggerAction, onSelectFolder, permissions);

  const contextMenuRef = useDetectOutsideClick(() => setVisible(false));

  const canLoadMore = currentFetched < currentTotal;

  return (
    <div className="files-root">
      <FilesHeader unselectFiles={unselectFiles}>
        {activeLayout === "list" && 
          <>
            <div className="file-name">Name</div>
            <div className="file-date">Modified</div>
            <div className="file-size">Size</div>
          </>
        }
      </FilesHeader>
      <div
        ref={filesViewRef}
        className={`files ${activeLayout}`}
        onContextMenu={handleContextMenu}
        onClick={unselectFiles}
      >
        {currentPathFiles?.length > 0 ? (
          <>
            {currentPathFiles.map((file, index) => (
              <FileItem
                key={index}
                index={index}
                file={file}
                onCreateFolder={onCreateFolder}
                onRename={onRename}
                onFileOpen={onFileOpen}
                enableFilePreview={enableFilePreview}
                triggerAction={triggerAction}
                filesViewRef={filesViewRef}
                selectedFileIndexes={selectedFileIndexes}
                handleContextMenu={handleContextMenu}
                setVisible={setVisible}
                setLastSelectedFile={setLastSelectedFile}
                onSelectFolder={onSelectFolder}
                permissions={permissions}
              />
            ))}
            
            {lazyLoading && (
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                textAlign: 'center',
                marginTop: '2rem',
                gridColumn: '1 / -1', // Span the full width of the grid
                width: '100%',
              }}
            >
              {canLoadMore && (
              <Button onClick={loadMoreFiles} padding="0.45rem .45rem" disabled={isLoading}>
                <MdOutlineFileDownload size={15} />
                <span>Load More Files</span>
              </Button>
              )}
              
              <div style={{ marginTop: '0.5rem', fontSize: '0.9rem', color: '#666' }}>
                Showing {currentFetched} of {currentTotal} files
              </div>
            </div>
          )}
            
          </>
        )
        : (
          <div className="empty-folder">This folder is empty.</div>
        )}

        <ContextMenu
          filesViewRef={filesViewRef}
          contextMenuRef={contextMenuRef.ref}
          menuItems={isSelectionCtx ? selecCtxItems : emptySelecCtxItems}
          visible={visible}
          setVisible={setVisible}
          clickPosition={clickPosition}
        />
      </div>
    </div>
  );
};

export default FileList;