Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState, useCallback, useEffect } from 'react'
import { useDropzone } from 'react-dropzone'
import { shareModalTypes } from '../../redux/share-modal/shareModal.types'
import FormErrorFeedback from '../form-error-feedback/FormErrorFeedback'
import IconButton from '@mui/material/IconButton'
import CloseIcon from '@mui/icons-material/Close'
const areEqual = (prevProps, nextProps) => {
  return prevProps.settedFile === nextProps.settedFile
}

const DropzoneComponent = (props) => {
  const { modalType, onUploaded, settedFile, recomendationText } = props

  const [errors, setErrors] = useState([])
  const [files, setFiles] = useState([])

  const onDropRejected = useCallback((rejectedFiles) => {
    rejectedFiles.map((fileRejection) => {
      switch (fileRejection.errors[0].code) {
        case 'too-many-files':
          setErrors([...errors, 'solo puedes agregar 1 archivo'])
          break
        case 'file-invalid-type':
          setErrors([...errors, 'por favor seleccione un archivo valido'])
          break
        default:
          setErrors(errors)
          break
      }
    })
  }, [])

  useEffect(() => {
    if (settedFile) setFiles([settedFile])
  }, [settedFile])

  const acceptedMimeTypes = () => {
    switch (modalType) {
      case shareModalTypes.IMAGE:
        return 'image/jpeg, image/png, image/jpg'
      case shareModalTypes.FILE:
        return 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation'
      case shareModalTypes.VIDEO:
        return 'video/mp4, video/mpeg, video/webm'
      case shareModalTypes.CHAT:
        return 'video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg'
      default:
        return null
    }
  }

  const { getRootProps, getInputProps } = useDropzone({
    accept: acceptedMimeTypes(),
    multiple: false,
    onDrop: (acceptedFiles) => {
      onUploaded(acceptedFiles[0])
      setFiles(acceptedFiles.map((file) => file))
    },
    onDropRejected,
    onDropAccepted: () => {
      setErrors([])
    },
    maxFiles: 1,
  })

  const imgStyle = {
    display: 'block',
    width: 'auto',
    height: '100%',
    objectFit: 'contain',
  }

  const onDeleteFileHandler = (index) => {
    onUploaded('')
    setFiles([])
  }

  const filePreviewTest = (file) => {
    switch (modalType) {
      case shareModalTypes.IMAGE:
        return <img src={URL.createObjectURL(file)} style={imgStyle} />
      case shareModalTypes.FILE:
        switch (file.type) {
          case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
            return (
              <iframe
                src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
                  file
                )}`}
                width="100%"
                height="600px"
              />
            )
          case 'application/pdf':
            return (
              <object data={URL.createObjectURL(file)} type="application/pdf" />
            )
          case shareModalTypes.VIDEO:
            return (
              <video
                src={URL.createObjectURL(file)}
                width="400"
                height="300"
                controls
                autoPlay
                muted
              />
            )
          case shareModalTypes.CHAT:
            switch (file.type) {
              case 'video/mp4':
              case 'video/mpeg':
              case 'video/webm':
                return (
                  <video
                    src={URL.createObjectURL(file)}
                    width="400"
                    height="300"
                    controls
                    autoPlay
                    muted
                  />
                )
              case 'image/jpeg':
              case 'image/png':
              case 'image/jpg':
                return <img src={URL.createObjectURL(file)} style={imgStyle} />
              case 'application/pdf':
                return (
                  <object
                    data={URL.createObjectURL(file)}
                    type="application/pdf"
                    width="400"
                    height="200"
                  />
                )
              default:
                break
            }
            break
          default:
            break
        }
    }
  }

  const baseStyle = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '2rem 0',
    borderWidth: 2,
    borderRadius: 2,
    borderColor: '#eeeeee',
    borderStyle: 'dashed',
    backgroundColor: '#fafafa',
    color: '#bdbdbd',
    outline: 'none',
    transition: 'border .24s ease-in-out',
    marginTop: '1rem',
    cursor: 'pointer',
  }

  const thumbsContainerStyle = {
    display: 'flex',
    marginTop: 16,
    position: 'relative',
    justifyContent: 'center',
  }

  return (
    <>
      {!files.length ? (
        <div {...getRootProps({ className: 'dropzone', style: baseStyle })}>
          <input {...getInputProps()} />
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
          {recomendationText}
        </div>
      ) : (
        <div style={thumbsContainerStyle}>
          {files.map((file, id) => filePreviewTest(file, id))}
          <IconButton className="close" onClick={() => onDeleteFileHandler()}>
            <CloseIcon />
          </IconButton>
        </div>
      )}
      {errors.map((error, index) => (
        <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
      ))}
    </>
  )
}

export default React.memo(DropzoneComponent, areEqual)