projeto-hit/frontend/src/components/MessageInput/index.js

import React, { useState, useEffect, useContext, useRef } from "react"
import "emoji-mart/css/emoji-mart.css"
import { useParams } from "react-router-dom"
import { Picker } from "emoji-mart"
import MicRecorder from "mic-recorder-to-mp3"
import clsx from "clsx"

import { makeStyles } from "@material-ui/core/styles"
import Paper from "@material-ui/core/Paper"
import InputBase from "@material-ui/core/InputBase"
import CircularProgress from "@material-ui/core/CircularProgress"
import { green } from "@material-ui/core/colors"
import AttachFileIcon from "@material-ui/icons/AttachFile"
import IconButton from "@material-ui/core/IconButton"
import MoreVert from "@material-ui/icons/MoreVert"
import MoodIcon from "@material-ui/icons/Mood"
import SendIcon from "@material-ui/icons/Send"
import CancelIcon from "@material-ui/icons/Cancel"
import ClearIcon from "@material-ui/icons/Clear"
import MicIcon from "@material-ui/icons/Mic"
import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline"
import HighlightOffIcon from "@material-ui/icons/HighlightOff"
import {
  FormControlLabel,
  Hidden,
  Menu,
  MenuItem,
  Switch,
} from "@material-ui/core"
import ClickAwayListener from "@material-ui/core/ClickAwayListener"

import { i18n } from "../../translate/i18n"
import api from "../../services/api"
import RecordingTimer from "./RecordingTimer"
import { ReplyMessageContext } from "../../context/ReplyingMessage/ReplyingMessageContext"
import { AuthContext } from "../../context/Auth/AuthContext"
import { useLocalStorage } from "../../hooks/useLocalStorage"
import toastError from "../../errors/toastError"

// import TicketsManager from "../../components/TicketsManager/";

import { TabTicketContext } from "../../context/TabTicketHeaderOption/TabTicketHeaderOption"
import ModalTemplate from "../ModalTemplate"

import { render } from '@testing-library/react'
import { countTicketMsgContext } from "../../context/CountTicketMsgProvider/CountTicketMsgProvider"

const Mp3Recorder = new MicRecorder({ bitRate: 128 })

const useStyles = makeStyles((theme) => ({
  mainWrapper: {
    background: "#eee",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    borderTop: "1px solid rgba(0, 0, 0, 0.12)",
    [theme.breakpoints.down("sm")]: {
      position: "fixed",
      bottom: 0,
      width: "100%",
    },
  },

  newMessageBox: {
    background: "#eee",
    width: "100%",
    display: "flex",
    padding: "7px",
    alignItems: "center",
  },

  messageInputWrapper: {
    padding: 6,
    marginRight: 7,
    background: "#fff",
    display: "flex",
    borderRadius: 20,
    flex: 1,
    position: "relative",
  },

  messageInput: {
    paddingLeft: 10,
    flex: 1,
    border: "none",
  },

  sendMessageIcons: {
    color: "grey",
  },

  uploadInput: {
    display: "none",
  },

  viewMediaInputWrapper: {
    display: "flex",
    padding: "10px 13px",
    position: "relative",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "#eee",
    borderTop: "1px solid rgba(0, 0, 0, 0.12)",
  },

  emojiBox: {
    position: "absolute",
    bottom: 63,
    width: 40,
    borderTop: "1px solid #e8e8e8",
  },

  circleLoading: {
    color: green[500],
    opacity: "70%",
    position: "absolute",
    top: "20%",
    left: "50%",
    marginLeft: -12,
  },

  audioLoading: {
    color: green[500],
    opacity: "70%",
  },

  recorderWrapper: {
    display: "flex",
    alignItems: "center",
    alignContent: "middle",
  },

  cancelAudioIcon: {
    color: "red",
  },

  sendAudioIcon: {
    color: "green",
  },

  replyginMsgWrapper: {
    display: "flex",
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 8,
    paddingLeft: 73,
    paddingRight: 7,
  },

  replyginMsgContainer: {
    flex: 1,
    marginRight: 5,
    overflowY: "hidden",
    backgroundColor: "rgba(0, 0, 0, 0.05)",
    borderRadius: "7.5px",
    display: "flex",
    position: "relative",
  },

  replyginMsgBody: {
    padding: 10,
    height: "auto",
    display: "block",
    whiteSpace: "pre-wrap",
    overflow: "hidden",
  },

  replyginContactMsgSideColor: {
    flex: "none",
    width: "4px",
    backgroundColor: "#35cd96",
  },

  replyginSelfMsgSideColor: {
    flex: "none",
    width: "4px",
    backgroundColor: "#6bcbef",
  },

  messageContactName: {
    display: "flex",
    color: "#6bcbef",
    fontWeight: 500,
  },
  messageQuickAnswersWrapper: {
    margin: 0,
    position: "absolute",
    bottom: "50px",
    background: "#ffffff",
    padding: "2px",
    border: "1px solid #CCC",
    left: 0,
    width: "100%",
    "& li": {
      listStyle: "none",
      "& a": {
        display: "block",
        padding: "8px",
        textOverflow: "ellipsis",
        overflow: "hidden",
        maxHeight: "32px",
        "&:hover": {
          background: "#F1F1F1",
          cursor: "pointer",
        },
      },
    },
  },
}))

const MessageInput = ({ ticketStatus, ticketLastMessage, ticketIsRemote }) => {

  const { tabOption, setTabOption } = useContext(TabTicketContext)

  const { countTicketMsg, setCountTicketMsg } = useContext(countTicketMsgContext)

  const classes = useStyles()
  const { ticketId } = useParams()

  const [medias, setMedias] = useState([])
  const [inputMessage, setInputMessage] = useState("")
  const [showEmoji, setShowEmoji] = useState(false)
  const [loading, setLoading] = useState(false)
  const [recording, setRecording] = useState(false)
  const [quickAnswers, setQuickAnswer] = useState([])
  const [typeBar, setTypeBar] = useState(false)
  const inputRef = useRef()
  const [anchorEl, setAnchorEl] = useState(null)
  const { setReplyingMessage, replyingMessage } = useContext(ReplyMessageContext)
  const { user } = useContext(AuthContext)
  const [templates, setTemplates] = useState(null)
  const [params, setParams] = useState(null)

  const [signMessage, setSignMessage] = useLocalStorage("signOption", true)

  const isRun = useRef(false)

  useEffect(() => {
    inputRef.current.focus()
  }, [replyingMessage])


  useEffect(() => {

    if (ticketIsRemote && countTicketMsg === 0 && ticketLastMessage && ticketLastMessage.trim().length > 0) {
      setInputMessage(ticketLastMessage)
    }
    else {
      setInputMessage("")
    }
  }, [countTicketMsg, ticketIsRemote, ticketLastMessage])

  useEffect(() => {
    inputRef.current.focus()
    return () => {
      setInputMessage("")
      setShowEmoji(false)
      setMedias([])
      setReplyingMessage(null)
    }
  }, [ticketId, setReplyingMessage])

  const handleChangeInput = (e) => {
    setInputMessage(e.target.value)
    handleLoadQuickAnswer(e.target.value)
  }

  const handleQuickAnswersClick = (value) => {
    setInputMessage(value)
    setTypeBar(false)
  }

  const handleAddEmoji = (e) => {
    let emoji = e.native
    setInputMessage((prevState) => prevState + emoji)
  }

  const handleChangeMedias = (e) => {
    if (!e.target.files) {
      return
    }

    const selectedMedias = Array.from(e.target.files)
    setMedias(selectedMedias)
  }

  const handleInputPaste = (e) => {
    if (e.clipboardData.files[0]) {

      console.log('clipboardData: ', e.clipboardData.files[0])
      setMedias([e.clipboardData.files[0]])
    }
  }

  const handleUploadMedia = async (e) => {
    setLoading(true)
    e.preventDefault()



    if (tabOption === 'search') {
      setTabOption('open')
    }

    const formData = new FormData()
    formData.append("fromMe", true)
    medias.forEach((media) => {
      formData.append("medias", media)
      formData.append("body", media.name)
    })

    try {
      const { data } = await api.post(`/messages/${ticketId}`, formData)

      console.log('DATA FROM SEND MESSAGE MEDIA: ', data)

    } catch (err) {
      toastError(err)
    }

    setLoading(false)
    setMedias([])
  }

  const handleSendMessage = async (templateParams = null) => {

    if (inputMessage.trim() === "") return
    setLoading(true)

    if (tabOption === 'search') {
      setTabOption('open')
    }

    if (templateParams) {
      for (let key in templateParams) {
        if (templateParams.hasOwnProperty(key)) {

          if (key === '_reactName') {
            templateParams = null
            break
          }
        }
      }
    }

    let message = {
      read: 1,
      fromMe: true,
      mediaUrl: "",
      body: (signMessage && !templateParams) ? `*${user?.name}:*\n${inputMessage.trim()}` : inputMessage.trim(),
      quotedMsg: replyingMessage
    }

    if (templateParams) {
      message = { ...message, params: templateParams }
    }


    try {

      const { data } = await api.post(`/messages/${ticketId}`, message)
      setParams(null)
      if (data && data?.data && Array.isArray(data.data)) {
        setTemplates(data.data)
      }

      setCountTicketMsg(1)

    } catch (err) {
      toastError(err)
    }

    setInputMessage("")
    setShowEmoji(false)
    setLoading(false)
    setReplyingMessage(null)
  }


  useEffect(() => {

    if (!params) return

    const body_params = params?.find(p => p?.type === 'BODY')

    console.log('------------> body_params: ', body_params)

    if (!body_params) return

    let { text } = body_params

    console.log('PARAMS FROM MESSAGE INPUT: ', params, ' | text: ', text)

    let body = text.match(/{{\d+}}/g)

    if (body && body.length > 0) {

      const { parameters } = body_params

      for (const key in parameters) {
        if (!isNaN(key)) {
          const { index, text: body_text } = parameters[key]
          text = text.replace(`{{${index}}}`, body_text)
        }
      }

    }
    console.log('NEW TEXT: ', text)
    setInputMessage(text)

  }, [params])

  useEffect(() => {

    if (params) {
      handleSendMessage(params)
    }

  }, [inputMessage, params])

  useEffect(() => {

    if (!templates) return

    return render(<ModalTemplate
      modal_header={'Escolha um template para iniciar o Atendimento'}
      func={setParams}
      templates={templates.map(({ id, name, components, language, }) => {
        return { id, name, components, language, }
      })}
      ticketId={ticketId}
    />)

  }, [templates])

  const handleStartRecording = async () => {

    setLoading(true)
    try {
      await navigator.mediaDevices.getUserMedia({ audio: true })
      await Mp3Recorder.start()
      setRecording(true)
      setLoading(false)
    } catch (err) {
      toastError(err)
      setLoading(false)
    }
  }

  const handleLoadQuickAnswer = async (value) => {
    if (value && value.indexOf("/") === 0) {
      try {

        console.log('{ searchParam: inputMessage.substring(1) },: ', { searchParam: inputMessage.substring(1) },)

        console.log('USER ID: ', user.id)

        const { data } = await api.get("/quickAnswers/", {
          params: { searchParam: inputMessage.substring(1), userId: user.id },
        })

        setQuickAnswer(data.quickAnswers)
        if (data.quickAnswers.length > 0) {
          setTypeBar(true)
        } else {
          setTypeBar(false)
        }
      } catch (err) {
        setTypeBar(false)
      }
    } else {
      setTypeBar(false)
    }
  }

  const handleUploadAudio = async () => {
    setLoading(true)



    if (tabOption === 'search') {
      setTabOption('open')
    }

    try {
      const [, blob] = await Mp3Recorder.stop().getMp3()
      if (blob.size < 10000) {
        setLoading(false)
        setRecording(false)
        return
      }

      const formData = new FormData()
      const filename = `${new Date().getTime()}.mp3`
      formData.append("medias", blob, filename)
      formData.append("body", filename)
      formData.append("fromMe", true)
      formData.append("mic_audio", true)

      await api.post(`/messages/${ticketId}`, formData)
    } catch (err) {
      toastError(err)
    }

    setRecording(false)
    setLoading(false)
  }

  const handleCancelAudio = async () => {
    try {
      await Mp3Recorder.stop().getMp3()
      setRecording(false)
    } catch (err) {
      toastError(err)
    }
  }

  const handleOpenMenuClick = (event) => {
    setAnchorEl(event.currentTarget)
  }

  const handleMenuItemClick = (event) => {
    setAnchorEl(null)
  }

  const renderReplyingMessage = (message) => {
    return (
      <div className={classes.replyginMsgWrapper}>
        <div className={classes.replyginMsgContainer}>
          <span
            className={clsx(classes.replyginContactMsgSideColor, {
              [classes.replyginSelfMsgSideColor]: !message.fromMe,
            })}
          ></span>
          <div className={classes.replyginMsgBody}>
            {!message.fromMe && (
              <span className={classes.messageContactName}>
                {message.contact?.name}
              </span>
            )}
            {message.body}
          </div>
        </div>
        <IconButton
          aria-label="showRecorder"
          component="span"
          disabled={loading || ticketStatus !== "open"}
          onClick={() => setReplyingMessage(null)}
        >
          <ClearIcon className={classes.sendMessageIcons} />
        </IconButton>
      </div>
    )
  }

  if (medias.length > 0)
    return (
      <Paper elevation={0} square className={classes.viewMediaInputWrapper}>
        <IconButton
          aria-label="cancel-upload"
          component="span"
          onClick={(e) => setMedias([])}
        >
          <CancelIcon className={classes.sendMessageIcons} />
        </IconButton>

        {loading ? (
          <div>
            <CircularProgress className={classes.circleLoading} />
          </div>
        ) : (
          <span>
            {medias[0]?.name}
            {/* <img src={media.preview} alt=""></img> */}
          </span>
        )}
        <IconButton
          aria-label="send-upload"
          component="span"
          onClick={handleUploadMedia}
          disabled={loading}
        >
          <SendIcon className={classes.sendMessageIcons} />
        </IconButton>
      </Paper>
    )
  else {
    return (
      <Paper square elevation={0} className={classes.mainWrapper}>
        {replyingMessage && renderReplyingMessage(replyingMessage)}
        <div className={classes.newMessageBox}>
          <Hidden only={["sm", "xs"]}>
            <IconButton
              aria-label="emojiPicker"
              component="span"
              disabled={loading || recording || ticketStatus !== "open"}
              onClick={(e) => setShowEmoji((prevState) => !prevState)}
            >
              <MoodIcon className={classes.sendMessageIcons} />
            </IconButton>
            {showEmoji ? (
              <div className={classes.emojiBox}>
                <ClickAwayListener onClickAway={(e) => setShowEmoji(false)}>
                  <Picker
                    perLine={16}
                    showPreview={false}
                    showSkinTones={false}
                    onSelect={handleAddEmoji}
                  />
                </ClickAwayListener>
              </div>
            ) : null}

            <input
              multiple
              type="file"
              id="upload-button"
              disabled={loading || recording || ticketStatus !== "open"}
              className={classes.uploadInput}
              onChange={handleChangeMedias}
            />
            <label htmlFor="upload-button">
              <IconButton
                aria-label="upload"
                component="span"
                disabled={loading || recording || ticketStatus !== "open"}
              >
                <AttachFileIcon className={classes.sendMessageIcons} />
              </IconButton>
            </label>
            <FormControlLabel
              style={{ marginRight: 7, color: "gray" }}
              label={i18n.t("messagesInput.signMessage")}
              labelPlacement="start"
              control={
                <Switch
                  size="small"
                  checked={signMessage}
                  onChange={(e) => {
                    setSignMessage(e.target.checked)
                  }}
                  name="showAllTickets"
                  color="primary"
                />
              }
            />
          </Hidden>
          <Hidden only={["md", "lg", "xl"]}>
            <IconButton
              aria-controls="simple-menu"
              aria-haspopup="true"
              onClick={handleOpenMenuClick}
            >
              <MoreVert></MoreVert>
            </IconButton>
            <Menu
              id="simple-menu"
              keepMounted
              anchorEl={anchorEl}
              open={Boolean(anchorEl)}
              onClose={handleMenuItemClick}
            >
              <MenuItem onClick={handleMenuItemClick}>
                <IconButton
                  aria-label="emojiPicker"
                  component="span"
                  disabled={loading || recording || ticketStatus !== "open"}
                  onClick={(e) => setShowEmoji((prevState) => !prevState)}
                >
                  <MoodIcon className={classes.sendMessageIcons} />
                </IconButton>
              </MenuItem>
              <MenuItem onClick={handleMenuItemClick}>
                <input
                  multiple
                  type="file"
                  id="upload-button"
                  disabled={loading || recording || ticketStatus !== "open"}
                  className={classes.uploadInput}
                  onChange={handleChangeMedias}
                />
                <label htmlFor="upload-button">
                  <IconButton
                    aria-label="upload"
                    component="span"
                    disabled={loading || recording || ticketStatus !== "open"}
                  >
                    <AttachFileIcon className={classes.sendMessageIcons} />
                  </IconButton>
                </label>
              </MenuItem>
              <MenuItem onClick={handleMenuItemClick}>
                <FormControlLabel
                  style={{ marginRight: 7, color: "gray" }}
                  label={i18n.t("messagesInput.signMessage")}
                  labelPlacement="start"
                  control={
                    <Switch
                      size="small"
                      checked={signMessage}
                      onChange={(e) => {
                        setSignMessage(e.target.checked)
                      }}
                      name="showAllTickets"
                      color="primary"
                    />
                  }
                />
              </MenuItem>
            </Menu>
          </Hidden>
          <div className={classes.messageInputWrapper}>
            <InputBase
              inputRef={(input) => {
                input && input.focus()
                input && (inputRef.current = input)
              }}
              className={classes.messageInput}
              placeholder={
                ticketStatus === "open"
                  ? i18n.t("messagesInput.placeholderOpen")
                  : i18n.t("messagesInput.placeholderClosed")
              }
              multiline
              // rowsMax={5}
              maxRows={5}
              value={inputMessage}
              onChange={handleChangeInput}
              disabled={recording || loading || ticketStatus !== "open"}
              onPaste={(e) => {
                ticketStatus === "open" && handleInputPaste(e)
              }}
              onKeyPress={(e) => {
                if (loading || e.shiftKey) return
                else if (e.key === "Enter") {
                  handleSendMessage()
                }
              }}
            />
            {typeBar ? (
              <ul className={classes.messageQuickAnswersWrapper}>
                {quickAnswers.map((value, index) => {
                  return (
                    <li
                      className={classes.messageQuickAnswersWrapperItem}
                      key={index}
                    >
                      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                      <a onClick={() => handleQuickAnswersClick(value.message)}>
                        {`${value.shortcut} - ${value.message}`}
                      </a>
                    </li>
                  )
                })}
              </ul>
            ) : (
              <div></div>
            )}
          </div>
          {inputMessage ? (
            <IconButton
              aria-label="sendMessage"
              component="span"
              onClick={handleSendMessage}
              disabled={loading}
            >
              <SendIcon className={classes.sendMessageIcons} />
            </IconButton>
          ) : recording ? (
            <div className={classes.recorderWrapper}>
              <IconButton
                aria-label="cancelRecording"
                component="span"
                fontSize="large"
                disabled={loading}
                onClick={handleCancelAudio}
              >
                <HighlightOffIcon className={classes.cancelAudioIcon} />
              </IconButton>
              {loading ? (
                <div>
                  <CircularProgress className={classes.audioLoading} />
                </div>
              ) : (
                <RecordingTimer />
              )}

              <IconButton
                aria-label="sendRecordedAudio"
                component="span"
                onClick={handleUploadAudio}
                disabled={loading}
              >
                <CheckCircleOutlineIcon className={classes.sendAudioIcon} />
              </IconButton>
            </div>
          ) : (
            <IconButton
              aria-label="showRecorder"
              component="span"
              disabled={loading || ticketStatus !== "open"}
              onClick={handleStartRecording}
            >
              <MicIcon className={classes.sendMessageIcons} />
            </IconButton>
          )}
        </div>
      </Paper>
    )
  }
}

export default MessageInput