Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useRef, useState } from 'react'
import { axios } from '../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'

import AttachFileIcon from '@mui/icons-material/AttachFile'
import SentimentVerySatisfiedRoundedIcon from '@mui/icons-material/SentimentVerySatisfiedRounded'
import Emojione from '../../chat/chat/personal-chat/emojione/Emojione'
import SendFileModal from '../../chat/chat/personal-chat/send-file-modal/SendFileModal'

const TextBox = ({
  uploadUrl = '',
  isNotSeen = false,
  markRead = () => false,
  onSend,
}) => {
  const [isShowFileModal, setIsShowFileModal] = useState(false)
  const [showEmojiTab, setShowEmojiTab] = useState(false)
  const [loading, setLoading] = useState(false)
  const textAreaEl = useRef(null)

  const dispatch = useDispatch()

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

  const toggleFileModal = () => {
    setIsShowFileModal(!isShowFileModal)
  }

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

  const sendFile = (file) => {
    setLoading(true)
    const formData = new FormData()
    formData.append('file', file)

    axios
      .post(uploadUrl, formData)
      .then(({ data: response }) => {
        const { success, data } = response
        if (!success) {
          const errorMessage =
            typeof data === 'string' ? data : 'Ha ocurrido un error'
          dispatch(addNotification({ style: 'success', msg: errorMessage }))
          return
        }

        toggleFileModal()
      })
      .finally(() => setLoading(false))
  }

  return (
    <>
      <div className="chat-text_box">
        <button className="btn" onClick={toggleFileModal}>
          <AttachFileIcon />
        </button>
        <button className="btn" onClick={handleShowEmojiTab}>
          <SentimentVerySatisfiedRoundedIcon />
        </button>
        <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>
      <SendFileModal
        isShow={isShowFileModal}
        onHide={toggleFileModal}
        onComplete={sendFile}
        loading={loading}
      />
    </>
  )
}

export default TextBox