Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useRef, useState } from 'react'
import { useForm } from 'react-hook-form'
import SendIcon from '@mui/icons-material/Send'
import AttachFileIcon from '@mui/icons-material/AttachFile'
import FileModal from '../../mobile-chat/mobile-chat/chat/fileModal/FileModal'

const permittedFiles = 'video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg'

const MessageBox = ({ onSend, sendUrl }) => {
  const fileInputEl = useRef(null)
  const [selectedFile, setSelectedFile] = useState('')
  const { handleSubmit, register, reset } = useForm()

  const handleUploadFile = (e) => {
    const file = e.target.files[0]
    if (file) setSelectedFile(file)
  }

  const removeSelectedFile = () => setSelectedFile('')

  const handleSendFile = () => {
    const messages = {
      filename: selectedFile,
      message: 'File'
    }
    onSend(sendUrl, messages)
    setSelectedFile('')
  }

  const handleSend = (message) => {
    onSend(sendUrl, message)
    reset()
  }

  return (
        <div className="chat__input-container">
            <form onSubmit={handleSubmit(handleSend)}>
                <input
                    type="file"
                    name="file"
                    hidden
                    ref={fileInputEl}
                    accept={permittedFiles}
                    onChange={handleUploadFile}
                />
                <button
                    type="button"
                    className='send_btn icon'
                    onClick={() => fileInputEl.current.click()}
                >
                    <AttachFileIcon />
                </button>
                <input
                    type="text"
                    name="message"
                    className="chatInput"
                    ref={register({ required: true })}
                    placeholder={LABELS.WRITE_YOUR_MESSAGE_HERE}
                />
                <button type="submit" className="send_btn">
                    <SendIcon />
                </button>
            </form>
            {selectedFile &&
                <FileModal
                    file={selectedFile}
                    onCancel={removeSelectedFile}
                    onSend={handleSendFile}
                />
            }
        </div>
  )
}
export default MessageBox