import React from "react";

import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext";
import { AuthContext } from "../../context/Auth/AuthContext";

import { MenuStyled, MenuListStyled } from "./MenuComponent.style";

import { ReactComponent as Tickets } from "../../assets/icons/Menu/Whatsapp.svg";
import { ReactComponent as Contact } from "../../assets/icons/Menu/Contact.svg";
import { ReactComponent as Reminder } from "../../assets/icons/Menu/Send.svg";
import { ReactComponent as FastAanswer } from "../../assets/icons/Menu/Mensage.svg";
import { ReactComponent as Users } from "../../assets/icons/Menu/Peoplealt.svg";
import { ReactComponent as Rows } from "../../assets/icons/Menu/Accounttree.svg";
import { ReactComponent as Conetions } from "../../assets/icons/Menu/Swap.svg";
import { ReactComponent as Dashboard } from "../../assets/icons/Menu/Dashboard.svg";
import { ReactComponent as FastResumes } from "../../assets/icons/Menu/Graph.svg";
import { ReactComponent as Super } from "../../assets/icons/Menu/Super.svg";
import { ReactComponent as Configuration } from "../../assets/icons/Menu/Configuration.svg";

import VideoComponent from "../VideoTag/VideoComponent";
import MenuItem from "./MenuItem";
import Divider from "../Base/Divider/DividerStyle";
import MenuBottom from "./MenuBottom";
import MenuTop from "./MenuTop";

const MenuComponent = () => {
  const [hover, setHover] = React.useState(false);
  const { whatsApps } = React.useContext(WhatsAppsContext);
  const { user } = React.useContext(AuthContext);
  const [connectionWarning, setConnectionWarning] = React.useState(false);

  const HoverMenu = () => {
    setHover(!hover);
  };

  React.useEffect(() => {
    const delayDebounceFn = setTimeout(() => {
      if (whatsApps.length > 0) {
        const offlineWhats = whatsApps.filter((whats) => {
          return (
            whats.status === "qrcode" ||
            whats.status === "PAIRING" ||
            whats.status === "DISCONNECTED" ||
            whats.status === "TIMEOUT" ||
            whats.status === "OPENING"
          );
        });
        if (offlineWhats.length > 0) {
          setConnectionWarning(true);
        } else {
          setConnectionWarning(false);
        }
      }
    }, 2000);
    return () => clearTimeout(delayDebounceFn);
  }, [whatsApps]);

  return (
    <MenuStyled onMouseEnter={HoverMenu} onMouseLeave={HoverMenu} hover={hover}>
      <VideoComponent width={"100%"} zIndex={"-1"} position={"absolute"} />
      <MenuTop hover={hover}/>
      <MenuListStyled>
        <MenuItem icon={<Tickets />} text="Tickets" to="/tickets" hover={hover} />
        <MenuItem icon={<Contact />} text="Contatos" to="/contacts" hover={hover} />
        <MenuItem icon={<Reminder />} text="Lembretes" to="/schedulesReminder" hover={hover} />
        <MenuItem icon={<FastAanswer />} text="Respostas" to="" hover={hover} />
        <Divider />
        <MenuItem icon={<Users />} text="Usuários" to="/users" hover={hover} />
        <MenuItem icon={<Rows />} text="Filas" to="/Queues" hover={hover} />
        <MenuItem icon={<Conetions />} text="Conexões" to="/connections" hover={hover} />
        <MenuItem icon={<Dashboard />} text="Dashboard" to="/" hover={hover} />
        <MenuItem icon={<FastResumes />} text="Relatórios" to="report" hover={hover} />
        <MenuItem icon={<Super />} text="Supervisão" to="" hover={hover} />
        <Divider />
        <MenuItem icon={<Configuration />} text="Configurações" to="/Settings" hover={hover} />
      </MenuListStyled>
      <MenuBottom hover={hover} />
    </MenuStyled>
  );
};

export default MenuComponent;