Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from "react";
import { axios } from "../../utils";
import { FiMaximize2 } from "react-icons/fi";
import AddIcon from "@mui/icons-material/Add";

// Components
import NotificationAlert from "../../shared/notification/NotificationAlert";
import PersonalChat from "./personal-chat/PersonalChat";
import ContactsModal from "./components/ContactsModal";
import ContactsFilters from "./components/contactsFilters";

const notifyAudio = new Audio("/audio/chat.mp3");

const Chat = ({ emojiOnePath, timezones }) => {
  const [contacts, setContacts] = useState([]);
  const [activeChats, setActiveChats] = useState([]);
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [isMuted, setIsMuted] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [loading, setLoading] = useState(false);

  const [pendingConversation, setPendingConversation] = useState("");

  const handleEntities = (entities) => {
    entities.map((entity) => {
      if (entity.not_received_messages) handleNewMessage(entity);
      if (entity.not_seen_messages) handleNotSeenMessage(entity);
      if (entity.is_open) handleOpenConversation(entity, false);
      if (entity.type === "user") handleUpdateOnline(entity);
    });
    setContacts(entities);
  };

  const heartBeat = async () => {
    try {
      setLoading(true);
      const { data } = await axios.get("/chat/heart-beat");
      if (data.success) handleEntities(data.data);
      setLoading(false);
      return data.data;
    } catch (error) {
      console.log(">>: chat error > ", error);
    }
  };

  const handleUpdateOnline = (entity) => {
    const existingChatId = activeChats.findIndex(
      (activeChat) => activeChat.id === entity.id
    );
    if (existingChatId >= 0) {
      if (activeChats[existingChatId].online !== entity.online) {
        const newActiveChats = [...activeChats];
        newActiveChats[existingChatId].online = entity.online;
        setActiveChats(newActiveChats);
      }
    }
  };

  const handleNewMessage = async (unseeEntity) => {
    await axios.post(unseeEntity.url_mark_received);
    if (!activeChats.some((activeChat) => activeChat.id === unseeEntity.id)) {
      setActiveChats([...activeChats, { ...unseeEntity, minimized: false }]);
      playNotifyAudio();
    } else {
      const existingChatId = activeChats.findIndex(
        (activeChat) => activeChat.id === unseeEntity.id
      );
      if (!activeChats[existingChatId].unsee_messages) {
        const newActiveChats = [...activeChats];
        newActiveChats[existingChatId].unsee_messages = true;
        setActiveChats(newActiveChats);
        playNotifyAudio(newActiveChats[existingChatId].minimized);
      }
    }
  };

  const handleCloseConversation = async (entity) => {
    const { data } = await axios.post(entity.url_close);
    if (!data.success) console.log("Error in entity close");
    setActiveChats(
      activeChats.filter((prevActiveChats) => prevActiveChats.id !== entity.id)
    );
  };

  const handleOpenConversation = async (entity, minimized = false) => {
    if (activeChats.some((el) => el.id === entity.id)) {
      return null;
    }

    if (activeChats.length >= 3) {
      await handleCloseConversation(activeChats[0]);
      setActiveChats((prevActiveChats) => [
        ...prevActiveChats,
        { ...entity, minimized },
      ]);
      return;
    }

    setActiveChats((prevActiveChats) => [
      ...prevActiveChats,
      { ...entity, minimized },
    ]);
  };

  const handleReadConversation = async (entity) => {
    try {
      const { data } = await axios.post(entity.url_mark_seen);
      if (!data.success) console.log("Ha ocurrido un error");
      setActiveChats((prevActiveChats) =>
        [...prevActiveChats].map((chat) => {
          if (entity.id === chat.id)
            return { ...chat, not_seen_messages: false };
          return chat;
        })
      );
    } catch (error) {
      console.log(`Error: ${error}`);
    }
  };

  const handleMinimizeConversation = (entity, minimized = null) => {
    return setActiveChats((prevActiveChats) =>
      [...prevActiveChats].map((chat) => {
        if (entity.id === chat.id)
          return { ...chat, minimized: minimized ?? !chat.minimized };
        return chat;
      })
    );
  };

  const handleNotSeenMessage = (entity) => {
    const index = activeChats.findIndex((chat) => chat.id === entity.id);

    if (index !== -1) {
      setActiveChats((prev) =>
        [...prev].map((chat) => {
          if (chat.id === entity.id) {
            return {
              ...chat,
              not_seen_messages: entity.not_seen_messages,
            };
          }
          return chat;
        })
      );
    }
  };

  const playNotifyAudio = (minimized = true) => {
    if (!isMuted && minimized) {
      notifyAudio.play();
    }
  };

  const handleMute = () => {
    setIsMuted(!isMuted);
    if (isMuted) {
      notifyAudio.play();
    }
  };

  useEffect(() => {
    if (!loading) setTimeout(() => heartBeat(), 2000);
  }, [loading]);

  useEffect(() => {
    if (pendingConversation) {
      const pendingChat = contacts.find(
        (contact) => contact.url_send === pendingConversation
      );

      if (pendingChat) {
        handleOpenConversation(pendingChat);
        setPendingConversation("");
      }
    }
  }, [pendingConversation, contacts]);

  useEffect(() => {
    emojione.imageType = "png";
    emojione.sprites = false;
    emojione.ascii = true;
    emojione.imagePathPNG = emojiOnePath;
  }, []);

  if (window.innerWidth < 1000 || window.location.pathname === "/chat")
    return null;

  return (
    <>
      <div className="chat-helper">
        <div
          className="subpanel_title"
          onClick={(e) =>
            e.currentTarget === e.target && setIsChatOpen(!isChatOpen)
          }
        >
          <a href="/chat" className="text-chat-title">
            {CHAT_LABELS.CHAT}
            <FiMaximize2 className="ml-3" />
          </a>

          <div className="subpanel_title-icons">
            <i
              className={`icon ${
                isMuted ? "icon-volume-off" : "icon-volume-2"
              } text-20`}
              onClick={handleMute}
            />
            <i
              className={`fa ${
                isChatOpen ? "fa-angle-down" : "fa-angle-up"
              } text-20`}
              onClick={() => setIsChatOpen(!isChatOpen)}
            />
          </div>
        </div>
        {isChatOpen && (
          <>
            <button className="action-btn" onClick={() => setShowModal(true)}>
              <AddIcon />
              {CHAT_LABELS.START_CONVERSATION}
            </button>
            <ContactsFilters
              dataset={contacts}
              selectConversation={(entity) => handleOpenConversation(entity)}
            />
          </>
        )}
      </div>

      <div className="active_chats-list">
        {activeChats.map((entity, index) => (
          <PersonalChat
            index={index}
            key={entity.id}
            entity={entity}
            not_seen_messages={entity.not_seen_messages}
            minimized={entity.minimized}
            onClose={handleCloseConversation}
            onMinimize={handleMinimizeConversation}
            onRead={handleReadConversation}
            timezones={timezones}
          />
        ))}
      </div>
      <ContactsModal show={showModal} onClose={() => setShowModal(false)} />
      <NotificationAlert />
    </>
  );
};

export default Chat;