Proyectos de Subversion LeadersLinked - 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 = ({ activeTab, entity, changeTab, changeConversation }) => {

  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

      }

      toggleConfirmModal()

      changeConversation(null)

      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={() =>

            activeTab === CHAT_TABS.DEFAULT

              ? changeConversation(null)

              : 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