Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { axios } from '../../utils'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import styled from 'styled-components'
import SendIcon from '@mui/icons-material/Send'
import IconButton from '@mui/material/IconButton'
import ArrowBackIcon from '@mui/icons-material/ArrowBack'
import AttachFileIcon from '@mui/icons-material/AttachFile'
import InsertEmoticonIcon from '@mui/icons-material/InsertEmoticon'

import Options from '../UI/Option'
import Emojione from './emojione/Emojione'
import FileModal from '../modals/FileModal'

const ChatContainer = styled.div`
  background-color: var(--bg-color);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-primary);
  height: 80vh;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0px 0px !important;
`

const StyledChatHeader = styled.div`
  align-items: center;
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  justify-content: center;
  padding: 1rem 0.5rem;
  position: relative;

  & > button:first-child {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;

    @media (min-width: 768px) {
      display: none;
    }
  }
`

const StyledTitle = styled.h2`
  font-size: 16px;
  font-weight: 600;
  width: fit-content;
  max-width: 20ch;
  text-align: center;
  color: #1d315c;

  @media (min-width: 768px) {
    max-width: 30ch;
  }
`

const StyledForm = styled.form`
  border-top: 1px solid var(--border-primary);
  padding: 0.5rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
`

const StyledInput = styled.input`
  border: none;
  outline: none;
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 30px;
  background: var(--bg-color-secondary);

  &:focus {
    background: var(--bg-color-secondary);
  }
`

const Header = ({ children, options = [], onClose }) => {
  return (
    <StyledChatHeader>
      <IconButton onClick={onClose}>
        <ArrowBackIcon />
      </IconButton>
      {children}
      {!!options.length && <Options options={options} right='1rem' />}
    </StyledChatHeader>
  )
}

const Title = ({ children, url }) => {
  if (!url) {
    return <StyledTitle>{children}</StyledTitle>
  }

  return (
    <Link to={url} style={{ width: 'fit-content' }}>
      <StyledTitle>{children}</StyledTitle>
    </Link>
  )
}

const SubmitForm = ({ sendUrl, uploadUrl, onSubmit: onComplete }) => {
  const [showEmojione, setShowEmojione] = useState(false)
  const [isShowFileModal, setIsShowFileModal] = useState(false)
  const [isSending, setIsSending] = useState(false)
  const dispatch = useDispatch()

  const { handleSubmit, setValue, register, reset, getValues } = useForm()

  const onSubmit = handleSubmit(({ message }) => {
    const formData = new FormData()

    formData.append('message', emojione.toShort(message))

    axios.post(sendUrl, formData).then((response) => {
      const { success, data } = response.data

      if (!success) {
        const errorMessage =
          typeof data === 'string' ? data : 'Ha ocurrido un error'

        setShowEmojione(false)
        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
        return
      }

      setShowEmojione(false)
      onComplete()
      reset()
    })
  })

  const sendFile = (file) => {
    setIsSending(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()
        onComplete()
      })
      .finally(() => setIsSending(false))
  }

  const toggleEmojione = () => {
    setShowEmojione(!showEmojione)
  }

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

  const onClickEmoji = (event) => {
    const shortname = event.currentTarget.dataset.shortname
    const currentMessage = getValues('message')
    // eslint-disable-next-line no-undef
    const unicode = emojione.shortnameToUnicode(shortname)
    setValue('message', `${currentMessage}${unicode}`)
  }

  return (
    <>
      <StyledForm onSubmit={onSubmit}>
        {showEmojione && <Emojione onClickEmoji={onClickEmoji} />}
        <IconButton onClick={toggleFileModal}>
          <AttachFileIcon />
        </IconButton>
        <IconButton onClick={toggleEmojione}>
          <InsertEmoticonIcon />
        </IconButton>
        <StyledInput
          type='text'
          name='message'
          placeholder='Escribe un mensaje'
          ref={register({ required: true })}
        />
        <IconButton type='submit'>
          <SendIcon />
        </IconButton>
      </StyledForm>
      <FileModal
        isShow={isShowFileModal}
        onHide={toggleFileModal}
        onComplete={sendFile}
        loading={isSending}
      />
    </>
  )
}

ChatContainer.Header = Header
ChatContainer.Title = Title

ChatContainer.SubmitForm = SubmitForm

export default ChatContainer