import { useEffect, useState } from 'react';
import { Dropzone, ExtFile, FileMosaic } from '@files-ui/react';

export const DropZoneComp = ({
  setDocuments,
}: {
  setDocuments?: (files: ExtFile[]) => void;
}) => {
  const [files, setFiles] = useState<ExtFile[]>([]);
  const updateFiles = (incommingFiles: ExtFile[]) => {
    setFiles(incommingFiles);
    setDocuments?.(files);
  };

  const removeFile = (id: number | string | undefined) => {
    setFiles(files.filter((x) => x.id !== id));
  };

  return (
    <div className="flex flex-col max-w-full overflow-hidden">
      <Dropzone maxFileSize={20000} value={files} onChange={updateFiles}>
        {files.length > 0 &&
          files.map((file: ExtFile) => (
            <FileMosaic
              {...file}
              onDelete={removeFile}
              key={file.id}
              info
              preview
            />
          ))}
      </Dropzone>
    </div>
  );
};

export default DropZoneComp;