Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';
import { useDropzone } from 'react-dropzone';
import { Typography } from '@mui/material';
import Delete from '@mui/icons-material/Delete';
import { DragAndDropContainer, PreviewContainer, CloseButton } from './FilePicker.styles';

const FILE_TYPES = {
  image: 'image/jpeg, image/png, image/jpg',
  file: 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation',
  video: 'video/mp4, video/mpeg, video/webm, video/quicktime',
  audio: 'audio/mpeg, audio/mp3, audio/wav, audio/ogg'
};

export function FilePicker({
  type = 'image',
  multiple = false,
  maxFiles = 1,
  description = 'Arrastra el archivo aqui, o haga click para seleccionar',
  defaultFiles = null,
  onChange = () => {}
}) {
  const [errors, setErrors] = useState([]);
  const [previews, setPreviews] = useState([]);

  const handlePreviews = (files) => {
    const previews = files.map((file) => {
      const preview = {
        url: URL.createObjectURL(file),
        name: file.name,
        type: file.type
      };

      return preview;
    });

    setPreviews(previews);
  };

  const onDropAccepted = (files) => {
    handlePreviews(files);
    onChange(multiple ? files : files[0]);
  };

  const onDropRejected = (rejections) => {
    if (rejections.length === 0) return;
    const errors = rejections.map((rejection) => rejection.errors[0].message);
    setErrors(errors);
  };

  const { getRootProps, getInputProps } = useDropzone({
    accept: FILE_TYPES[type] ?? FILE_TYPES.image,
    multiple,
    maxFiles,
    onDropAccepted,
    onDropRejected
  });

  const removeFile = () => {
    setPreviews([]);
    setErrors([]);
  };

  const filePreviewTest = (preview) => {
    switch (type) {
      case 'image':
        return <img src={preview} alt='preview' />;
      case 'video':
        return <video src={preview} width='400' height='300' controls muted />;
      case 'file':
        return <object data={preview} type='application/pdf' width='400' height='200' />;
      case 'audio':
        return <audio src={preview} controls muted />;
      default:
        break;
    }
  };

  console.log({ previews });
  console.log({ errors });
  console.log({ defaultFiles });
  console.log({ type });

  useEffect(() => {
    if (defaultFiles) setPreviews(defaultFiles);
  }, [defaultFiles]);

  if (previews.length) {
    return (
      <PreviewContainer>
        {previews.map((preview) => filePreviewTest(preview))}
        <CloseButton onClick={removeFile}>
          <Delete />
        </CloseButton>
      </PreviewContainer>
    );
  }

  return (
    <>
      <DragAndDropContainer {...getRootProps()}>
        <input {...getInputProps()} />
        <p>{description}</p>
      </DragAndDropContainer>

      {errors.map((error, index) => (
        <Typography key={index} variant='caption' color='red'>
          {error}
        </Typography>
      ))}
    </>
  );
}