Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { Suspense, useRef, useState } from 'react'
import AttachFileIcon from '@mui/icons-material/AttachFile'
import SentimentVerySatisfiedRoundedIcon from '@mui/icons-material/SentimentVerySatisfiedRounded'
import Emojione from '../../chat/chat/personal-chat/emojione/Emojione'
const SendFileModal = React.lazy(() => import('../../chat/chat/personal-chat/send-file-modal/SendFileModal'))

const TextBox = ({
  uploadUrl = '',
  isNotSeen = false,
  markRead = () => false,
  onSend
}) => {
  const [showEmojiTab, setShowEmojiTab] = useState(false)
  const [showFileModal, setShowFileModal] = useState(false)
  const textAreaEl = useRef(null)

  const handleshowFileModal = () => setShowFileModal(!showFileModal)

  const handleShowEmojiTab = () => setShowEmojiTab(!showEmojiTab)

  const handleClickEmoji = (e) => {
    const shortname = e.currentTarget.dataset.shortname
    const currentText = textAreaEl.current.value
    const cursorPosition = textAreaEl.current.selectionStart
    const textBehind = currentText.substring(0, cursorPosition)
    const textForward = currentText.substring(cursorPosition)
    const unicode = emojione.shortnameToUnicode(shortname)
    textAreaEl.current.value = `${textBehind}${unicode}${textForward}`
    textAreaEl.current.focus()
    textAreaEl.current.setSelectionRange(
      cursorPosition + unicode.length,
      cursorPosition + unicode.length
    )
  }

  const onKeyDown = async (e) => {
    if (e.key !== 'Enter') return false
    e.preventDefault()
    const message = e.target.value
    await onSend(message)
    e.target.value = ''
    setShowEmojiTab(false)
  }

  return (
        <>
            <div className="chat-text_box">
                <AttachFileIcon onClick={handleshowFileModal} />
                <SentimentVerySatisfiedRoundedIcon onClick={handleShowEmojiTab} />
                <textarea
                    placeholder={CHAT_LABELS.WRITE_A_MESSAGE}
                    onKeyDown={onKeyDown}
                    ref={textAreaEl}
                    onFocus={() => isNotSeen && markRead()}
                />
                <div className="emojione-container" style={{ display: showEmojiTab ? 'block' : 'none' }}>
                    <Emojione onClickEmoji={handleClickEmoji} />
                </div>
            </div>
            {showFileModal &&
                <Suspense fallback={null}>
                    <SendFileModal
                        show={true}
                        onHide={() => setShowFileModal(false)}
                        urlUpload={uploadUrl}
                    />
                </Suspense>
            }
        </>
  )
}

export default TextBox