Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useRef, useState } from 'react'
import { axios, scrollToBottom } from '../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import InboxIcon from '@mui/icons-material/Inbox'

import Chat from './Chat'
import EmptySection from '../UI/EmptySection'
import ConferenceModal from '../modals/ConferenceModal'
import useMessages from '../../hooks/useMessages'
import ConfirmModal from '../modals/ConfirmModal'

const CHAT_TABS = {
  CHAT: 'CHAT',
  DEFAULT: 'DEFAULT',
  GROUP_MEMBERS: 'GROUP_MEMBERS',
  ADD_GROUP_MEMBER: 'ADD_GROUP_MEMBER',
}

const ChatBox = ({ entity, changeTab }) => {
  const {
    url_get_all_messages,
    url_mark_received,
    not_received_messages,
    not_seen_messages,
    url_zoom,
    url_send,
    url_upload,
    url_mark_seen,
    // url_close,
    url_add_user_to_group, // Group url
    url_delete, // Group url
    url_get_contact_group_list, // Group url
    url_leave, // Group url
    name,
    profile,
  } = entity

  const { messages, loadMore, loading, reset } =
    useMessages(url_get_all_messages)
  const [isShowConferenceModal, setisShowConferenceModal] = useState(false)
  const [isShowConfirmModal, setisShowConfirmModal] = useState(false)
  const [options, setOptions] = useState([])
  const scrollRef = useRef(null)
  const actionUrl = useRef('')
  const dispatch = useDispatch()

  const toggleConfirmModal = () => {
    setisShowConfirmModal(!isShowConfirmModal)
  }

  const toggleConferenceModal = () => {
    setisShowConferenceModal(!isShowConferenceModal)
  }

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

      changeTab(CHAT_TABS.DEFAULT)
    })
  }

  useEffect(() => {
    if (not_seen_messages) axios.post(url_mark_seen)
    if (not_received_messages) axios.post(url_mark_received)
    if (options.length) setOptions([])
    reset()
  }, [entity])

  useEffect(() => {
    if (url_leave) {
      setOptions((prevOptions) =>
        prevOptions.concat({
          url: url_leave,
          label: 'Dejar Grupo',
          action: () => {
            toggleConfirmModal()
            actionUrl.current = url_leave
          },
        })
      )
    }
    if (url_delete) {
      setOptions((prevOptions) =>
        prevOptions.concat({
          url: url_delete,
          label: 'Eliminar Grupo',
          action: () => {
            toggleConfirmModal()
            actionUrl.current = url_delete
          },
        })
      )
    }
    if (url_get_contact_group_list) {
      setOptions((prevOptions) =>
        prevOptions.concat({
          url: url_get_contact_group_list,
          label: 'Integrantes',
          action: () => changeTab(CHAT_TABS.GROUP_MEMBERS),
        })
      )
    }
    if (url_add_user_to_group) {
      setOptions((prevOptions) =>
        prevOptions.concat({
          url: url_add_user_to_group,
          label: 'Agregar Contactos',
          action: () => changeTab(CHAT_TABS.ADD_GROUP_MEMBER),
        })
      )
    }
    if (url_zoom) {
      setOptions((prevOptions) =>
        prevOptions.concat({
          url: url_zoom,
          label: 'Crear Conferencia',
          action: toggleConferenceModal,
        })
      )
    }
  }, [entity])

  return (
    <>
      <Chat>
        <Chat.Header
          onClose={() => changeTab(CHAT_TABS.DEFAULT)}
          options={options}
        >
          <Chat.Title url={profile}>{name}</Chat.Title>
        </Chat.Header>

        {!messages.length ? (
          <EmptySection
            Icon={<InboxIcon />}
            message="No hay mensajes en esta conversación"
            align="center"
          />
        ) : (
          <Chat.List
            messages={messages}
            onPagination={loadMore}
            loading={loading}
            scrollRef={scrollRef}
          />
        )}

        <Chat.SubmitForm
          sendUrl={url_send}
          uploadUrl={url_upload}
          onSubmit={() => scrollToBottom(scrollRef)}
        />
      </Chat>
      <ConferenceModal
        show={isShowConferenceModal}
        zoomUrl={url_zoom}
        onClose={toggleConferenceModal}
      />
      <ConfirmModal
        show={isShowConfirmModal}
        onClose={toggleConfirmModal}
        onAccept={() => deleteGroup(actionUrl.current)}
      />
    </>
  )
}

export default ChatBox