Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable react/prop-types */
import React from 'react'
import { useState, useRef, useEffect } from 'react'
import styled from 'styled-components'
import { axios } from '../../../utils'
import Emojione from './emojione/Emojione'
import SendFileModal from './send-file-modal/SendFileModal'
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
import MessageTemplate from './messageTemplate/MessageTemplate'

const StyledChatHead = styled.div`
  .notify {
    animation: notify 2s infinite;
  }

  @keyframes notify {
    0% {
      background-color: unset;
    }
    50% {
      background-color: #00b0ff;
    }
    100% {
      background-color: unset;
    }
  }
`

const StyledShowOptions = styled.div`
  height: 342px;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
  &.show {
    display: flex;
  }
  &.hide {
    display: none;
  }
  .optionBack {
    margin: 1rem 0 0.5rem 1rem;
    cursor: pointer;
  }
  .optionsTab {
    &__option {
      padding: 0.5rem;
      border-bottom: 1px solid #e2e2e2;
      cursor: pointer;
      &:hover {
        background-color: #e2e2e2;
      }
      &__icon {
        margin-right: 0.3rem;
      }
    }
  }
  .addPersonToGroupTab {
    display: flex;
    flex-direction: column;
    &__person {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.2rem 0.5rem;
      border-bottom: 1px solid #e2e2e2;
    }
  }
`

const PersonalChat = ({ entity, index, onClose, onMinimize, onRead }) => {

        // entity destructuring
        const {
                id,
                image,
                name,
                online,
                type,
                unsee_messages,
                url_clear,
                url_close,
                url_get_all_messages,
                url_send,
                url_upload,
                minimized,
                profile,
                handleReadChat,
                // group
                url_leave,
                url_delete,
                url_add_user_to_group,
                url_get_contact_group_list,
                url_get_contacts_availables_for_group,
        } = entity

        // states
        const [messages, setMessages] = useState([])
        const [responseMessage, setResponseMessage] = useState(null)
        const [newMessages, setNewMessages] = useState([])
        const [oldMessages, setOldMessages] = useState([])
        const [currentPage, setCurrentPage] = useState(1)
        const [pages, setPages] = useState(1)
        const [loading, setLoading] = useState(false)
        const [showOptions, setShowOptions] = useState(false)
        const [optionTab, setOptionTab] = useState('default')
        const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
        const [groupContactsList, setGroupContactsList] = useState([])
        const [confirmModalShow, setConfirmModalShow] = useState(false)
        const [optionsLoading, setOptionsLoading] = useState(false)
        const [showEmojiTab, setShowEmojiTab] = useState(false)
        const [shareFileModalShow, setShareFileModalShow] = useState(false)

        // refs
        const conversationListEl = useRef(null)
        const loader = useRef(null)
        const modalActionUrl = useRef('')
        const chatboxEl = useRef(null)
        const textAreaEl = useRef(null)

        // optionTabs
        const optionTabs = {
                add_person_to_group: 'add_person_to_group',
                group_contacts_list: 'group_contacts_list',
                default: 'default',
        }

        // timeIntervals
        let getMessageInterval

        const handleActive = () => {
                onRead(index)
                onMinimize(index)
        }

        // const handleGetMessages = async () => {
        //   await axios.get(url_get_all_messages).then((response) => {
        //     const resData = response.data;
        //     if (resData.success) {
        //       const updatedMessages = resData.data.items.slice();
        //       let newNewMessages = [];
        //       updatedMessages.map((updatedNewMessage) => {
        //         const existInNewMessages = newMessages.findIndex(
        //           (newMessage) => newMessage.id === updatedNewMessage.id
        //         );
        //         if (existInNewMessages === -1) {
        //           newNewMessages = [updatedNewMessage, ...newNewMessages];
        //           setPages(resData.data.pages);
        //         }
        //       });
        //       if (newNewMessages.length > 0) {
        //         setNewMessages((prevState) => [...prevState, ...newNewMessages]);
        //       }

        //       // setMessages([...resData.data.items, ...oldMessages]);
        //     }
        //   });
        //   onRead(index);
        // };

        const handleGetMessages = async () => {
                const response = await axios.get(url_get_all_messages)
                const resData = response.data
                if (!resData.success) {
                        return ('ha ocurrido un error', resData)
                }
                const updatedMessages = [...resData.data.items].reverse()
                const newMessages = updatedMessages.reduce((acum, updatedMessage) => {
                        if (
                                messages.findIndex((message) => message.id === updatedMessage.id) === -1
                        ) {
                                acum = [...acum, updatedMessage]
                        }
                        return acum
                }, [])
                if (newMessages.length > 0) {
                        setMessages([...messages, ...newMessages])
                        setPages(resData.data.pages)
                        scrollToBottom()
                }
                setLoading(false)
        }

        const handleLoadMore = async () => {
                await axios.get(`${url_get_all_messages}?page=${currentPage}`)
                        .then((response) => {
                                const resData = response.data
                                if (resData.success) {
                                        if (resData.data.page > 1) {
                                                const updatedOldMessages = [...resData.data.items].reverse()
                                                setOldMessages([...updatedOldMessages, ...oldMessages])
                                                /* scrollDownBy(100); */
                                        }
                                }
                        })
        }

        const handleCloseChat = () => {
                onClose(id, url_close)
        }

        const handleChatBoxKeyDown = async (e) => {
                if (e.key === 'Enter') {
                        e.preventDefault()
                        const message = e.target.value
                        const formData = new FormData()
                        formData.append('message', emojione.toShort(message))
                        await axios.post(url_send, formData).then((response) => {
                                const resData = response.data
                                if (resData.success) {
                                        let newMessage = resData.data

                                        online
                                                ? newMessage = { ...newMessage, not_received: false }
                                                : newMessage = { ...newMessage, not_received: true }

                                        setMessages([...messages, newMessage])
                                }
                        })
                        e.target.value = ''
                        /* await handleGetMessages(); */
                        setShowEmojiTab(false)
                        setResponseMessage(null)
                }
        }

        const handleShowOptions = () => {
                onMinimize(index, false)
                setShowOptions(!showOptions)
        }

        const handleChangeTab = (tab) => {
                setOptionTab(tab)
        }

        const handleAddPersonToGroup = async (id) => {
                const formData = new FormData()
                formData.append('uid', id)
                await axios.post(url_add_user_to_group, formData).then((response) => {
                        const resData = response.data
                        if (resData.success) {
                                loadPersonsAvailable()
                        }
                })
        }

        const handleConfirmModalAction = async () => {
                await axios.post(modalActionUrl.current).then((response) => {
                        const resData = response.data
                        if (resData.success) {
                        }
                })
                await onClose(id, url_close)
        }

        const handleObserver = (entities) => {
                const target = entities[0]
                if (target.isIntersecting) {
                        setCurrentPage((prevState) => prevState + 1)
                }
        }

        const scrollToBottom = () => {
                if (conversationListEl.current) {
                        conversationListEl.current.scrollTop =
                                conversationListEl.current.scrollHeight * 9
                }
        }

        const scrollDownBy = (scrollDistance) => {
                if (conversationListEl.current) {
                        conversationListEl.current.scrollTop = scrollDistance
                }
        }

        const handleShowEmojiTab = () => {
                setShowEmojiTab(!showEmojiTab)
                // smiley_tpl(`${id}`);
        }

        const handleClickEmoji = (e) => {
                const shortname = e.currentTarget.dataset.shortname
                const currentText = textAreaEl.current.value
                let 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
                )
        }

        // useEffect(() => {
        //   setMessages([...oldMessages, ...newMessages]);
        // }, [newMessages, oldMessages]);

        // getMessageOnMaximize and subscribe to infinite Loader
        useEffect(async () => {
                if (!minimized) {
                        await handleGetMessages()
                        // loader observer
                        let options = {
                                root: null,
                                rootMargin: '20px',
                                treshold: 1.0,
                        }
                        const observer = new IntersectionObserver(handleObserver, options)
                        if (loader.current) {
                                observer.observe(loader.current)
                        }
                }
                return () => {
                        if (loader.current) {
                                observer.unobserve(loader.current)
                        }
                }
        }, [minimized])

        // LoadMore on change page
        useEffect(() => {
                let loadMore = () => handleLoadMore()
                loadMore()
                return () => {
                        loadMore = null
                }
        }, [currentPage])

        // getMessagesInterval
        useEffect(() => {
                if (window.location.pathname === '/group/my-groups') {
                        const items = document.getElementsByClassName('sc-jSgupP')
                        if (items && items.length > 0)
                                items[0].style.display = 'none'
                }
                if (!minimized) {
                        clearInterval(getMessageInterval)
                        getMessageInterval = setInterval(() => {
                                handleGetMessages()
                        }, 1000)
                } else {
                        clearInterval(getMessageInterval)
                }
                return () => {
                        clearInterval(getMessageInterval)
                }
        })

        const handleConfirmModalShow = () => {
                setConfirmModalShow(!confirmModalShow)
        }

        const handleConfirmModalAccept = () => {
                handleConfirmModalAction()
        }

        const handleShareFileModalShow = () => {
                setShareFileModalShow(!shareFileModalShow)
        }

        const handleResponseMessage = (element) => {
                element.mtype === 'text'
                        ? setResponseMessage(element)
                        : setResponseMessage({ ...element, m: 'Archivo adjunto' })

                textAreaEl.current && textAreaEl.current.focus()
        }

        const messagesRender = () => {
                return (
                        <React.Fragment>
                                {currentPage < pages ? <li ref={loader}>Cargando...</li> : ''}
                                {oldMessages.map((oldMessage, i) =>
                                        <MessageTemplate key={i} message={oldMessage} />
                                )}
                                {messages.map((message, i) =>
                                        <MessageTemplate
                                                key={i}
                                                message={message}
                                                setResponseMessage={handleResponseMessage}
                                                responseMessage={responseMessage}
                                        />
                                )}
                        </React.Fragment>
                )
        }

        const optionRender = () => {
                switch (optionTab) {
                case optionTabs.add_person_to_group:
                        return addPersonToGroupTab
                case optionTabs.group_contacts_list:
                        return groupContactsListTab
                default:
                        return optionsDefaultTab
                }
        }

        // useEffect for tabs changing
        useEffect(() => {
                switch (optionTab) {
                case optionTabs.add_person_to_group:
                        loadPersonsAvailable()
                        break
                case optionTabs.group_contacts_list:
                        loadGroupContacts()
                        break
                }
        }, [optionTab])

        const loadPersonsAvailable = async () => {
                setOptionsLoading(true)
                await axios.get(url_get_contacts_availables_for_group).then((response) => {
                        const resData = response.data
                        if (resData.success) {
                                setAvailableContactsToAdd(resData.data)
                        }
                })
                setOptionsLoading(false)
        }

        const loadGroupContacts = async () => {
                setOptionsLoading(true)
                await axios.get(url_get_contact_group_list).then((response) => {
                        const resData = response.data
                        if (resData.success) {
                                setGroupContactsList(resData.data)
                        }
                })
                setOptionsLoading(false)
        }

        const handleDeletePersonFromGroup = async (urlDeletePersonFromGroup) => {
                await axios.post(urlDeletePersonFromGroup).then((response) => {
                        const resData = response.data
                        if (resData.success) {
                                loadGroupContacts()
                        }
                })
        }

        const optionsDefaultTab = (
                <React.Fragment>
                        <span className="optionBack" onClick={() => handleShowOptions()}>
                                <i className="fa icon-arrow-left"></i>
                        </span>
                        <div className="optionsTab">
                                <ul>
                                        {!!url_get_contact_group_list && (
                                                <li
                                                        className="optionsTab__option"
                                                        onClick={() => handleChangeTab(optionTabs.group_contacts_list)}
                                                >
                                                        <span className="optionsTab__option__icon">
                                                                <i className="fa fa-group"></i>
                                                        </span>
                                                        Integrantes
                                                </li>
                                        )}
                                        {!!url_add_user_to_group && (
                                                <li
                                                        className="optionsTab__option"
                                                        onClick={() => handleChangeTab(optionTabs.add_person_to_group)}
                                                >
                                                        <span className="optionsTab__option__icon">
                                                                <i className="fa fa-user-plus"></i>
                                                        </span>
                                                        Agregar contactos
                                                </li>
                                        )}
                                        {!!url_delete && (
                                                <li
                                                        className="optionsTab__option"
                                                        style={{ color: 'red' }}
                                                        onClick={() => {
                                                                handleConfirmModalShow()
                                                                modalActionUrl.current = url_delete
                                                        }}
                                                >
                                                        <span className="optionsTab__option__icon">
                                                                <i className="fa fa-trash"></i>
                                                        </span>
                                                        Eliminar grupo
                                                </li>
                                        )}
                                        {!!url_leave && (
                                                <li
                                                        className="optionsTab__option"
                                                        style={{ color: 'red' }}
                                                        onClick={() => {
                                                                handleConfirmModalShow()
                                                                modalActionUrl.current = url_leave
                                                        }}
                                                >
                                                        <span className="optionsTab__option__icon">
                                                                <i className="fa fa-user-times"></i>
                                                        </span>
                                                        Dejar grupo
                                                </li>
                                        )}
                                </ul>
                        </div>
                </React.Fragment>
        )

        const addPersonToGroupTab = (
                <React.Fragment>
                        <span
                                className="optionBack"
                                onClick={() => handleChangeTab(optionTabs.default)}
                        >
                                <i className="fa icon-arrow-left"></i>
                        </span>
                        <div className="addPersonToGroupTab">
                                {availableContactsToAdd.length ? (
                                        availableContactsToAdd.map(({ image, name, id }) => (
                                                <div className="addPersonToGroupTab__person" key={id}>
                                                        <div className="d-inline-flex" style={{ gap: '5px' }}>
                                                                <img
                                                                        className="chat-image img-circle pull-left"
                                                                        height="36"
                                                                        width="36"
                                                                        src={image}
                                                                        alt="image-image"
                                                                />
                                                                <div className="name">{name}</div>
                                                        </div>
                                                        <span
                                                                style={{
                                                                        cursor: 'pointer',
                                                                }}
                                                                onClick={() => {
                                                                        handleAddPersonToGroup(id)
                                                                }}
                                                        >
                                                                <i className="fa fa-plus-circle"></i>
                                                        </span>
                                                </div>
                                        ))
                                ) : (
                                        <div className="addPersonToGroupTab__person">No hay Contactos</div>
                                )}
                        </div>
                </React.Fragment>
        )

        const groupContactsListTab = (
                <React.Fragment>
                        <span
                                className="optionBack"
                                onClick={() => handleChangeTab(optionTabs.default)}
                        >
                                <i className="fa icon-arrow-left"></i>
                        </span>
                        <div className="addPersonToGroupTab">
                                {groupContactsList.length ? (
                                        groupContactsList.map(
                                                ({ image, name, url_remove_from_group, id }) => (
                                                        <div className="addPersonToGroupTab__person" key={id}>
                                                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                                                        <img
                                                                                className="chat-image img-circle pull-left"
                                                                                height="36"
                                                                                width="36"
                                                                                src={image}
                                                                                alt="image-image"
                                                                        />
                                                                        <div className="name">{name}</div>
                                                                </div>
                                                                {url_remove_from_group && (
                                                                        <span
                                                                                style={{
                                                                                        cursor: 'pointer',
                                                                                }}
                                                                                onClick={() => {
                                                                                        handleDeletePersonFromGroup(url_remove_from_group)
                                                                                }}
                                                                        >
                                                                                <i className="fa fa-user-times"></i>
                                                                        </span>
                                                                )}
                                                        </div>
                                                )
                                        )
                                ) : (
                                        <div className="addPersonToGroupTab__person">No hay Contactos</div>
                                )}
                        </div>
                </React.Fragment>
        )

        const shareFileModal = (
                <SendFileModal
                        show={shareFileModalShow}
                        onHide={() => {
                                setShareFileModalShow(false)
                        }}
                        urlUpload={url_upload}
                />
        )

        const userChat = (
                <React.Fragment>
                        <div className="chatbox active-chat">
                                <div className="chatbox-icon">
                                        <div className="contact-floating red">
                                                <img className="chat-image img-circle pull-left" src={image} />
                                                <small className="unread-msg">2</small>
                                        </div>
                                </div>
                                <div className="panel personal-chat">
                                        <StyledChatHead>
                                                <div
                                                        className={`panel-heading chatboxhead ${unsee_messages ? 'notify' : ''}`}
                                                >
                                                        <div className="panel-title">
                                                                <img
                                                                        className="chat-image img-circle pull-left"
                                                                        height="36"
                                                                        width="36"
                                                                        src={image}
                                                                        alt="avatar-image"
                                                                />
                                                                <div className="header-elements">
                                                                        <a href={profile} target="_blank" rel="noreferrer">
                                                                                {name}
                                                                        </a>
                                                                        <br />
                                                                        <small className={`status ${online ? 'Online' : 'Offline'}`}>
                                                                                <b>{online ? 'En línea' : 'Desconectado'}</b>
                                                                        </small>
                                                                        <div className="pull-right options">
                                                                                <div
                                                                                        className="btn-group uploadFile"
                                                                                        id="uploadFile"
                                                                                        data-client="'+chatboxtitle+'"
                                                                                >
                                                                                </div>
                                                                                <div className="btn-group">
                                                                                </div>
                                                                                <div className="btn-group">
                                                                                        <span>
                                                                                                <i
                                                                                                        className={'fa fa-minus-circle'}
                                                                                                        onClick={handleActive}
                                                                                                ></i>
                                                                                        </span>
                                                                                </div>
                                                                                <div className="btn-group">
                                                                                        <span>
                                                                                                <i className="fa fa-times-circle" onClick={handleCloseChat} />
                                                                                        </span>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                        </StyledChatHead>
                                        <div
                                                className="panel-body"
                                                style={{ display: !minimized ? 'block' : 'none' }}
                                        >
                                                <div
                                                        id="uploader_'+chatboxtitle+'"
                                                        style={{ display: 'none', height: '342px' }}
                                                >
                                                        <p>
                                                                Your browser does not have Flash, Silverlight or HTML5 support.
                                                        </p>
                                                </div>
                                                <div className="chat-conversation" style={{ position: 'relative' }}>
                                                        <div className="reverseChatBox" ref={conversationListEl}>
                                                                <ul
                                                                        className="conversation-list chatboxcontent"
                                                                        id="resultchat_'+chatboxtitle+'"
                                                                >
                                                                        {messagesRender()}
                                                                </ul>
                                                        </div>
                                                        <div className="wchat-footer wchat-chat-footer chatboxinput">
                                                                <div id="chatFrom" className="chatFrom">
                                                                        {
                                                                                responseMessage
                                                                                &&
                                                                                <div className={responseMessage ? 'resp_messages-container active' : 'resp_messages-container'}>
                                                                                        <span>{`Respondiendo a ${responseMessage.user_name}`}</span>
                                                                                        <p>{responseMessage.m}</p>
                                                                                </div>
                                                                        }
                                                                        <div className="block-wchat">
                                                                                <button
                                                                                        className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
                                                                                        id="uploadFile"
                                                                                        onClick={handleShareFileModalShow}
                                                                                ></button>
                                                                                <button
                                                                                        className="icon ti-face-smile font-24 btn-emoji"
                                                                                        id="toggle-emoji"
                                                                                        onClick={handleShowEmojiTab}
                                                                                ></button>
                                                                                <div className="input-container">
                                                                                        <div className="input-emoji">
                                                                                                <div
                                                                                                        className="input-placeholder"
                                                                                                        style={{ visibility: 'hidden', display: 'none' }}
                                                                                                >
                                                                                                        Escribe un mensaje
                                                                                                </div>
                                                                                                <textarea
                                                                                                        className="input chatboxtextarea"
                                                                                                        id="chatboxtextarea"
                                                                                                        name="chattxt"
                                                                                                        style={{ resize: 'none', height: '20px' }}
                                                                                                        placeholder="Escribe un mensaje"
                                                                                                        onKeyDown={handleChatBoxKeyDown}
                                                                                                        ref={textAreaEl}
                                                                                                        onBlur={() => responseMessage && setResponseMessage(null)}
                                                                                                        onFocus={() => onRead(index)}
                                                                                                ></textarea>
                                                                                                <input
                                                                                                        id="to_uname"
                                                                                                        name="to_uname"
                                                                                                        value="'+chatboxtitle+'"
                                                                                                        type="hidden"
                                                                                                />
                                                                                                <input
                                                                                                        id="from_uname"
                                                                                                        name="from_uname"
                                                                                                        value="Beenny"
                                                                                                        type="hidden"
                                                                                                />
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                                <div className="wchat-box-items-positioning-container">
                                                                        <div className="wchat-box-items-overlay-container">
                                                                                <div
                                                                                        className="target-emoji"
                                                                                        style={{ display: showEmojiTab ? 'block' : 'none' }}
                                                                                >
                                                                                        <div id={`smileyPanel_${id}`}>
                                                                                                <div>
                                                                                                        <Emojione onClickEmoji={handleClickEmoji} />
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        {shareFileModal}
                </React.Fragment>
        )

        const groupChat = (
                <React.Fragment>
                        <div
                                className="chatbox active-chat"
                                style={{
                                        bottom: '0px',
                                        right: `${(index + 1) * 295}px`,
                                        zIndes: '1',
                                        display: 'block',
                                }}
                                id={`chatbox_${id}`}
                                ref={chatboxEl}
                        >
                                <div className="chatbox-icon">
                                        <div className="contact-floating red">
                                                <img className="chat-image img-circle pull-left" src={image} />
                                                <small className="unread-msg">2</small>
                                                {/* <small className="status"'+ status+'></small> */}
                                        </div>
                                </div>
                                <div className="panel personal-chat">
                                        <StyledChatHead>
                                                <div
                                                        className={`panel-heading chatboxhead ${unsee_messages ? 'notify' : ''
                                                        }`}
                                                >
                                                        <div className="panel-title-group">
                                                                <img
                                                                        className="chat-image img-circle pull-left"
                                                                        height="36"
                                                                        width="36"
                                                                        src="/images/users-group.png"
                                                                        alt="avatar-image"
                                                                />
                                                                <div className="header-elements">
                                                                        <p>{name}</p>
                                                                        <br />
                                                                        <div className="pull-right options">
                                                                                <div
                                                                                        className="btn-group uploadFile"
                                                                                        id="uploadFile"
                                                                                        data-client="'+chatboxtitle+'"
                                                                                >
                                                                                        {/* <span>
                      <i className="fa fa-trash"></i>
                    </span> */}
                                                                                </div>
                                                                                <div
                                                                                        className="btn-group"
                                                                                // onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
                                                                                // href="javascript:void(0)"
                                                                                >
                                                                                        {/* <span>
                      <i className="fa fa-trash"></i>
                    </span> */}
                                                                                </div>
                                                                                <div
                                                                                        className="btn-group addUser"
                                                                                        data-client="8cb2a840-56c2-4f93-9cf1-27ad598acd8f"
                                                                                        data-name="Grupo de jesus"
                                                                                >
                                                                                        <span>
                                                                                                <i
                                                                                                        // className="fa fa-user-plus"
                                                                                                        className="fa fa-gear"
                                                                                                        onClick={handleShowOptions}
                                                                                                ></i>
                                                                                        </span>
                                                                                </div>
                                                                                <div
                                                                                        className="btn-group"
                                                                                // onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
                                                                                // href="javascript:void(0)"
                                                                                >
                                                                                        <span>
                                                                                                <i
                                                                                                        className={'fa fa-minus-circle'}
                                                                                                        onClick={handleActive}
                                                                                                ></i>
                                                                                        </span>
                                                                                </div>
                                                                                <div
                                                                                        className="btn-group"
                                                                                // onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
                                                                                // href="javascript:void(0)"
                                                                                >
                                                                                        <span>
                                                                                                <i
                                                                                                        className="fa fa-times-circle"
                                                                                                        onClick={handleCloseChat}
                                                                                                ></i>
                                                                                        </span>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                        </StyledChatHead>
                                        <div
                                                className="panel-body"
                                                style={{ display: !minimized ? 'block' : 'none' }}
                                        >
                                                <StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
                                                        {optionRender()}
                                                </StyledShowOptions>

                                                <div
                                                        className="chat-conversation"
                                                        style={{
                                                                display: showOptions ? 'none' : 'block',
                                                                position: 'relative',
                                                        }}
                                                >
                                                        <div className="reverseChatBox" ref={conversationListEl}>
                                                                <ul
                                                                        className="conversation-list chatboxcontent"
                                                                        id="resultchat_'+chatboxtitle+'"
                                                                >
                                                                        {messagesRender()}
                                                                </ul>
                                                        </div>
                                                        <div className="wchat-footer wchat-chat-footer chatboxinput">
                                                                <div id="chatFrom">
                                                                        <div className="block-wchat">
                                                                                <button
                                                                                        className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
                                                                                        id="uploadFile"
                                                                                        onClick={handleShareFileModalShow}
                                                                                ></button>
                                                                                <button
                                                                                        className="icon ti-face-smile font-24 btn-emoji"
                                                                                        id="toggle-emoji"
                                                                                        onClick={handleShowEmojiTab}
                                                                                ></button>
                                                                                <div className="input-container">
                                                                                        <div className="input-emoji">
                                                                                                <div
                                                                                                        className="input-placeholder"
                                                                                                        style={{ visibility: 'hidden', display: 'none' }}
                                                                                                >
                                                                                                        Escribe un mensaje
                                                                                                </div>
                                                                                                <textarea
                                                                                                        className="input chatboxtextarea"
                                                                                                        id="chatboxtextarea"
                                                                                                        name="chattxt"
                                                                                                        style={{ resize: 'none', height: '20px' }}
                                                                                                        placeholder="Escribe un mensaje"
                                                                                                        onKeyDown={handleChatBoxKeyDown}
                                                                                                        ref={textAreaEl}
                                                                                                        onFocus={() => onRead(index)}
                                                                                                        onBlur={() => responseMessage && setResponseMessage(null)}
                                                                                                ></textarea>
                                                                                                <input
                                                                                                        id="to_uname"
                                                                                                        name="to_uname"
                                                                                                        value="'+chatboxtitle+'"
                                                                                                        type="hidden"
                                                                                                />
                                                                                                <input
                                                                                                        id="from_uname"
                                                                                                        name="from_uname"
                                                                                                        value="Beenny"
                                                                                                        type="hidden"
                                                                                                />
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                                <div className="wchat-box-items-positioning-container">
                                                                        <div className="wchat-box-items-overlay-container">
                                                                                <div
                                                                                        className="target-emoji"
                                                                                        style={{ display: showEmojiTab ? 'block' : 'none' }}
                                                                                >
                                                                                        <div id={`smileyPanel_${id}`}>
                                                                                                <div>
                                                                                                        <Emojione onClickEmoji={handleClickEmoji} />
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        <ConfirmModal
                                show={confirmModalShow}
                                onClose={handleConfirmModalShow}
                                onAccept={handleConfirmModalAccept}
                        />
                        {shareFileModal}
                </React.Fragment>
        )

        switch (type) {
        case 'user':
                return userChat
        case 'group':
                return groupChat
        default:
                break
        }
}

export default PersonalChat