Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5017 | Rev 5026 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log | 

/* eslint-disable react/prop-types */
import React, { useState, useRef, useEffect } from "react";
import { axios } from "../../../utils";
import styled from "styled-components";
import Emojione from "./emojione/Emojione";
import SendFileModal from "./send-file-modal/SendFileModal";
import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal";
import MessageTemplate from "./messageTemplate/MessageTemplate";
import { Modal } from "react-bootstrap";
import { useForm } from "react-hook-form";
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
import 'react-datetime/css/react-datetime.css'
import Datetime from "react-datetime";
import { addNotification } from "../../../redux/notification/notification.actions";
import Spinner from "../../../shared/loading-spinner/Spinner";
import { useDispatch } from "react-redux";
import SearchIcon from '@mui/icons-material/Search'

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;
  gap: 0.5rem;  
  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, onClose, onMinimize, onRead, not_seen_messages, minimized, timezones }) => {

  const {
    id,
    image,
    name,
    online,
    type,
    url_get_all_messages,
    url_send,
    url_upload,
    profile,
    // group
    url_leave,
    url_delete,
    url_add_user_to_group,
    url_get_contact_group_list,
    url_get_contacts_availables_for_group,
    url_zoom
  } = entity;

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

  const filtredGroupList = groupContactsList.filter((conversation) => conversation.name.toLowerCase().includes(search.toLowerCase()))

  // 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",
    meet: 'meet',
    default: "default",
  };

  const handleActive = () => {
    onRead(entity);
    onMinimize(entity);
  };

  const handleGetMessages = async () => {
    setLoading(true)
    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]);
      setLoading(false)
      setPages(resData.data.pages);
      scrollToBottom();
    } else {
      setMessages([...updatedMessages]);
      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(entity)

  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(entity, 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 () => {
    try {
      const { data } = await axios.post(modalActionUrl.current)
      if (!data.success) console.log('Error in confirm modal action')
      handleConfirmModalShow()
      onClose(entity);
      return
    } catch (error) {
      console.log(error)
    }
  };

  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 () => {
    let options = {
      root: null,
      rootMargin: "20px",
      treshold: 1.0,
    };
    const observer = new IntersectionObserver(handleObserver, options);
    if (!minimized) {
      await handleGetMessages();
      // loader observer
      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';
    }
  }, [minimized]);

  useEffect(() => {
    let timer;
    if (!minimized && !loading) {
      timer = setTimeout(() => handleGetMessages(), 1000);
    }
    return () => {
      clearTimeout(timer);
    };
  }, [minimized, loading]);

  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 displayConferenceModal = () => setShowConferenceModal(!showConferenceModal)

  const messagesRender = () => {
    return (
      <React.Fragment>
        {currentPage < pages ? <li ref={loader}>Cargando...</li> : ""}
        {oldMessages.map((oldMessage) => (
          <MessageTemplate time={oldMessage.time} key={oldMessage.id} message={oldMessage} />
        ))}
        {messages.map((message, i) => {
          let currentTime = message.time;
          let prevMessage = messages[i - 1];

          const dailys = ["mes", "meses", "semana", "semanas", "dia", 'dias', "año", "años"]
          const date = new Date(Date.now()).toLocaleDateString()

          if (prevMessage !== undefined) {
            let prevTime = messages[i - 1].time;

            if (prevTime !== currentTime && dailys.includes(prevTime.split(' ')[1])) {
              return <>
                {/* <h2 className="text-center date-chat">{date}</h2> */}
                <MessageTemplate
                  key={message.id}
                  message={message}
                  time={message.time}
                  setResponseMessage={handleResponseMessage}
                  responseMessage={responseMessage}
                />
              </>
            }
          }

          return <MessageTemplate
            key={message.id}
            message={message}
            time={message.time}
            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;
      case optionTabs.meet:
        return meetingOptionsTab;
      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 () => {
    await axios.get(url_get_contacts_availables_for_group).then((response) => {
      const resData = response.data;
      if (resData.success) {
        setAvailableContactsToAdd(resData.data);
      }
    });
  };

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

  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_zoom &&
            <li
              className="optionsTab__option"
              onClick={displayConferenceModal}
            >
              <span className="optionsTab__option__icon">
                <i className="fa fa-user-plus" />
              </span>
              Crear conferencia
            </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 meetingOptionsTab = (
    <>
      <span className="optionBack" onClick={() => handleShowOptions()}>
        <i className="fa icon-arrow-left" />
      </span>
      <div className="optionsTab">
        <ul>
          <li
            className="optionsTab__option"
            onClick={displayConferenceModal}
          >
            <span className="optionsTab__option__icon">
              <i className="fa fa-user-plus" />
            </span>
            Crear conferencia
          </li>
        </ul>
      </div>
    </>
  );

  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 = (
    <>
      <span className="optionBack" onClick={() => handleChangeTab(optionTabs.default)}>
        <i className="fa icon-arrow-left" />
      </span>
      <div className='group__search'>
        <SearchIcon />
        <input
          type='text'
          placeholder='Buscar'
          onChange={(e) => setSearch(e.target.value)}
        />
      </div>
      <div className="addPersonToGroupTab">
        {filtredGroupList.length
          ? filtredGroupList.map(({ image, name, url_remove_from_group, id }) => {
            return (
              <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 className="cursor-pointer" onClick={() => handleDeletePersonFromGroup(url_remove_from_group)}>
                    <i className="fa fa-user-times" />
                  </span>
                }
              </div>
            )
          })
          : <div className="addPersonToGroupTab__person">No hay Contactos</div>
        }
      </div>
    </>
  );

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

  const userChat = (
    <>
      <div className="chatbox active-chat" style={{ display: 'block' }}>
        <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 ${not_seen_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">
                      {/* <span>
                      <i className="fa fa-trash"></i>
                    </span> */}
                    </div>
                    <div className="btn-group">
                      {/* <span>
                      <i className="fa fa-trash"></i>
                    </span> */}
                    </div>
                    <div className="btn-group">
                      <span>
                        <i className="fa fa-gear" onClick={() => {
                          handleChangeTab(optionTabs.meet)
                          handleShowOptions()
                        }}
                        />
                      </span>
                    </div>
                    <div className="btn-group">
                      <span>
                        <i className={`fa fa-minus-circle`} onClick={handleActive} />
                      </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" }}
          >
            <StyledShowOptions className={` ${showOptions ? "show" : "hide"}`}>
              {optionRender()}
            </StyledShowOptions>
            <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", display: showOptions ? 'none' : 'block' }}
            >
              <div className="reverseChatBox" ref={conversationListEl}>
                <ul
                  className="conversation-list chatboxcontent"
                  id="resultchat_'+chatboxtitle+'"
                >
                  {messagesRender()}
                </ul>
              </div>
              <div className="wchat-footer wchat-chat-footer">
                <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={() => not_seen_messages && onRead(entity)}
                        />
                        <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}
      <ConferenceModal
        show={showConferenceModal}
        timezones={timezones}
        zoomUrl={url_zoom}
        onCreate={() => {
          handleShowOptions()
          displayConferenceModal()
        }}
      />
    </>
  );

  const groupChat = (
    <React.Fragment>
      <div
        className="chatbox active-chat "
        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>
          </div>
        </div>
        <div className="panel personal-chat">
          <StyledChatHead>
            <div className={`panel-heading chatboxhead ${not_seen_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+'"
                    >
                    </div>
                    <div className="btn-group">
                    </div>
                    <div
                      className="btn-group addUser"
                      data-client="8cb2a840-56c2-4f93-9cf1-27ad598acd8f"
                      data-name="Grupo de jesus"
                    >
                      <span>
                        <i
                          className="fa fa-gear"
                          onClick={handleShowOptions}
                        ></i>
                      </span>
                    </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}
                        ></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">
                <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={() => not_seen_messages && onRead(entity)}
                          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}
      />
      <ConferenceModal
        show={showConferenceModal}
        timezones={timezones}
        zoomUrl={url_zoom}
        onCreate={() => {
          handleShowOptions()
          displayConferenceModal()
        }}
      />
      {shareFileModal}
    </React.Fragment>
  );

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

const StyleModal = ({
  title = 'Crea una conferencia',
  size = 'md',
  show = false,
  children
}) => {

  const [isShow, setIsShow] = useState(show)

  useEffect(() => {
    setIsShow(show)
  }, [show])

  const closeModal = () => setIsShow(false)

  return (
    <Modal
      size={size}
      show={isShow}
      onHide={closeModal}
      style={{ overflowY: "scroll" }}
    >
      <Modal.Header closeButton>
        <Modal.Title>{title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {children}
      </Modal.Body>
    </Modal>
  )
}

const ConferenceModal = ({
  show = false,
  timezones = {},
  zoomUrl = '',
  onCreate = () => null
}) => {

  const dt = new Date()
  const { handleSubmit, register, errors, reset } = useForm({ mode: 'all' })
  const [date, setDate] = useState({
    year: dt.toLocaleString("default", { year: "numeric" }),
    month: dt.toLocaleString("default", { month: "2-digit" }),
    day: dt.toLocaleString("default", { day: "2-digit" })
  })
  const [time, setTime] = useState(dt.toLocaleString("es", { hour: 'numeric', minute: '2-digit', second: '2-digit' }))
  const [coferenceType, setConferenceType] = useState(1)
  const dispatch = useDispatch()

  const handleChange = (value) => setConferenceType(value)

  const handleDateTime = (value) => {
    setDate({
      ...date,
      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),
      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),
      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value),
    })
    setTime(new Intl.DateTimeFormat('es', { hour: 'numeric', minute: '2-digit', second: 'numeric' }).format(value))
  }

  const onSubmit = async (data) => {
    try {
      const formData = new FormData()

      Object.entries(data).forEach(([key, value]) => formData.append(key, value))
      formData.append('date', `${date.year}-${date.month}-${date.day}`)
      formData.append('time', time)

      const { data: response } = await axios.post(zoomUrl, formData)

      if (!response.success && typeof response.data === 'string') {
        dispatch(addNotification({ msg: response.data, style: 'danger' }))
        return
      }

      if (!response.success && typeof response.data === 'object') {
        Object.entries(response.data)
          .forEach(([key, value]) => {
            dispatch(addNotification({ msg: `${key}: ${value[0]}`, style: 'danger' }))
          })
        return
      }

      dispatch(addNotification({ msg: response.data, style: 'success' }))
      onCreate()
      reset()
    } catch (error) {
      console.log(`Error: ${error.message}`)
      return dispatch(addNotification({ msg: 'Ha ocurrido un error', style: 'danger' }))
    }
  }

  return (
    <StyleModal
      title='Crea una conferencia'
      size='md'
      show={show}
    >
      <form onSubmit={handleSubmit(onSubmit)} autoComplete="new-password">
        <div className="form-group">
          <label htmlFor="first_name">Título</label>
          <input
            type="text"
            name="title"
            className="form-control"
            maxLength={128}
            ref={register({ required: "Por favor ingrese un título" })}
          />
          {errors.title && <FormErrorFeedback> {errors.title.message}</FormErrorFeedback>}
        </div>
        <div className="form-group">
          <label htmlFor="first_name">Descripción</label>
          <input
            type="text"
            name="description"
            className="form-control"
            ref={register({ required: "Por favor ingrese una descripción" })}
          />
          {errors.description && <FormErrorFeedback> {errors.description.message}</FormErrorFeedback>}
        </div>
        <div className="form-group">
          <label htmlFor="timezone">Tipo de conferencia</label>
          <select
            name="type"
            className="form-control"
            onChange={({ target }) => handleChange(target.value)}
            ref={register}
          >
            <option value='i'>
              Inmediata
            </option>
            <option value='s'>
              Programada
            </option>
          </select>
        </div>
        {
          coferenceType === 's' &&
          <div className="form-group">
            <label htmlFor="timezone">Horario</label>
            <Datetime
              dateFormat="DD-MM-YYYY"
              onChange={(e) => {
                if (e.toDate) {
                  handleDateTime(e.toDate())
                }
              }}
              inputProps={{ className: 'form-control' }}
              initialValue={Date.parse(new Date())}
              closeOnSelect
            />
          </div>
        }
        <div className="form-group">
          <label htmlFor="timezone">Zona horaria</label>
          <select
            className="form-control"
            name="timezone"
            ref={register({ required: "Por favor elige una Zona horaria" })}
          >
            <option value="" hidden>
              Zona horaria
            </option>
            {Object.entries(timezones).map(([key, value]) => (
              <option value={key} key={key}>
                {value}
              </option>
            ))}
          </select>
          {errors.timezone && <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>}
        </div>
        <div className="form-group">
          <label htmlFor="timezone">Duración</label>
          <select
            className="form-control"
            name="duration"
            ref={register}
          >
            <option value={5}>5-min</option>
            <option value={10}>10-min</option>
            <option value={15}>15-min</option>
            <option value={20}>20-min</option>
            <option value={25}>25-min</option>
            <option value={30}>30-min</option>
            <option value={35}>35-min</option>
            <option value={40}>40-min</option>
            <option value={45}>45-min</option>
          </select>
        </div>
        <div className="form-group">
          <label htmlFor="first_name">Contraseña de ingreso</label>
          <input
            type="password"
            name="password"
            className="form-control"
            ref={register({
              required: "Por favor ingrese una contraseña",
              maxLength: { value: 6, message: "La contraseña debe tener al menos 6 digitos" }
            })}
          />
          {errors.password && <FormErrorFeedback> {errors.password.message}</FormErrorFeedback>}
        </div>
        <button
          className="btn btn-primary"
          type="submit"
        >
          Crear
        </button>
      </form>
    </StyleModal >
  )
}

export default React.memo(PersonalChat);