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'

const SendFileModal = React.lazy(() =>

  import('../../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