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'
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,
    acceptedFiles,
    fileRejections
  } = useDropzone({
    accept: acceptedMimeTypes(),
    multiple: false,
    onDrop: (acceptedFiles) => {
      onUploaded(acceptedFiles[0])
      setFiles(acceptedFiles.map((file) => file))
    },
    onDropRejected,
    onDropAccepted: () => {
      setErrors([])
    },
    maxFiles: 1
  })
  const thumbStyle = {
    display: 'inline-flex',
    borderRadius: '2px',
    border: '1px solid #eaeaea',
    marginBottom: '8px',
    marginRight: '8px',
    width: '150px',
    height: '150px',
    padding: '4px',
    boxSizing: 'border-box',
    position: 'relative',
    zIndex: '100'
  }
  const thumbInnerStyle = {
    display: 'flex',
    minWidth: 0,
    overflow: 'hidden',
    marginRight: '1.5rem'
  }
  const fileInnerStyle = {
    display: 'flex',
    overflow: 'hidden',
    margin: 'auto'
  }
  const imgStyle = {
    display: 'block',
    width: 'auto',
    height: '100%',
    objectFit: 'contain'
  }

  const onDeleteFileHandler = (index) => {
    const newFiles = files.filter((_, id) => id !== index)
    onUploaded('')
    setFiles(newFiles)
  }

  const CloseButtonContainer = {
    width: '20px',
    height: '20px',
    position: 'absolute',
    top: '5px',
    right: '0px',
    cursor: 'pointer',
    zIndex: '200'
  }

  const filePreviewTest = (file, id) => {
    console.log(file.type)
    switch (modalType) {
      case shareModalTypes.IMAGE:
        return (
          <div style={thumbStyle} key={file.name}>
            <div style={thumbInnerStyle}>
              <img src={URL.createObjectURL(file)} style={imgStyle} />
            </div>
            <div
              style={CloseButtonContainer}
              onClick={() => onDeleteFileHandler(id)}
            >
              <img
                src="/css/icons/x-circle-fill.svg"
                alt="close-button"
                style={{ width: '100%', height: '100%' }}
              />
            </div>
          </div>
        )
      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"
                frameBorder="0"
              />
            )
          case 'application/pdf':
            return (
              <div style={{
                ...thumbStyle,
                width: '90%',
                height: 'auto',
                margin: 'auto',
                maxWidth: '90%'
              }}
                key={file.name}
              >
                <div style={fileInnerStyle}>
                  <object
                    data={URL.createObjectURL(file)}
                    type="application/pdf"
                  />
                </div>
                <div
                  style={CloseButtonContainer}
                  onClick={() => onDeleteFileHandler(id)}
                >
                  <img
                    src="/css/icons/x-circle-fill.svg"
                    alt="close-button"
                    style={{ width: '100%', height: '100%' }}
                  />
                </div>
              </div>
            )
        }
      case shareModalTypes.VIDEO:
        return (
          <div
            style={{ ...thumbStyle, width: 'auto', height: 'auto', maxWidth: '100%' }}
            key={file.name}
          >
            <div style={thumbInnerStyle}>
              <video
                src={URL.createObjectURL(file)}
                width="400"
                height="300"
                controls
                autoPlay
                muted
              ></video>
            </div>
            <div
              style={CloseButtonContainer}
              onClick={() => onDeleteFileHandler(id)}
            >
              <img
                src="/css/icons/x-circle-fill.svg"
                alt="close-button"
                style={{ width: '100%', height: '100%' }}
              />
            </div>
          </div>
        )
      case shareModalTypes.CHAT:
        switch (file.type) {
          case 'video/mp4':
          case 'video/mpeg':
          case 'video/webm':
            return (
              <div
                style={{ ...thumbStyle, width: '90%', height: 'auto', margin: 'auto' }}
                key={file.name}
              >
                <div style={thumbInnerStyle}>
                  <video
                    src={URL.createObjectURL(file)}
                    width="400"
                    height="300"
                    controls
                    autoPlay
                    muted
                  ></video>
                </div>
                <div
                  style={CloseButtonContainer}
                  onClick={() => onDeleteFileHandler(id)}
                >
                  <img
                    src="/css/icons/x-circle-fill.svg"
                    alt="close-button"
                    style={{ width: '100%', height: '100%' }}
                  />
                </div>
              </div>
            )
          case 'image/jpeg':
          case 'image/png':
          case 'image/jpg':
            return (
              <div style={thumbStyle} key={file.name}>
                <div style={thumbInnerStyle}>
                  <img src={URL.createObjectURL(file)} style={imgStyle} />
                </div>
                <div
                  style={CloseButtonContainer}
                  onClick={() => onDeleteFileHandler(id)}
                >
                  <img
                    src="/css/icons/x-circle-fill.svg"
                    alt="close-button"
                    style={{ width: '100%', height: '100%' }}
                  />
                </div>
              </div>
            )
          case 'application/pdf':
            return (
              <div
                style={{ ...thumbStyle, width: '90%', height: 'auto', margin: 'auto' }}
                key={file.name}
              >
                <div style={thumbInnerStyle}>
                  <object
                    data={URL.createObjectURL(file)}
                    type="application/pdf"
                    width="400"
                    height="200"
                  ></object>
                </div>
                <div
                  style={CloseButtonContainer}
                  onClick={() => onDeleteFileHandler(id)}
                >
                  <img
                    src="/css/icons/x-circle-fill.svg"
                    alt="close-button"
                    style={{ width: '100%', height: '100%' }}
                  />
                </div>
              </div>
            )
          default:
            break
        }
        break
      default:
        break
    }
  }

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

  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'
  }

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

export default React.memo(DropzoneComponent, areEqual)