import React from "react";

import VideoComponent from "../VideoTag/VideoComponent";

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 { MenuStyled, MenuListStyled, MenuListItemStyled } from "./MenuComponent.style";
import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext";
import { AuthContext } from "../../context/Auth/AuthContext";

import img from "../../assets/images/Logo.png";
import MenuItem from "./MenuItem";

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"} />

      {/*Menu Top Header*/}
      <div style={{ display: "flex", flexDirection: "row", width: "100%" }}>
        <div style={{ width: "76px", backgroundColor: "white" }}>
          <img src={img} alt="" style={{ width: "100%" }} />
        </div>
      </div>
      {/*Menu Top Header*/}

      <MenuListStyled>
        {/* <MenuItem icon={<Whatsapp />} to="/tickets" text="Tickets" hover={hover} /> */}
        <MenuItem icon={<Tickets />} text="Tickets" to="" hover={hover} />
        <MenuItem icon={<Contact />} text="Contatos" to="" hover={hover} />
        <MenuItem icon={<Reminder />} text="Lembretes" to="" hover={hover} />
        <MenuItem icon={<FastAanswer />} text="Respostas" to="" hover={hover} />
        <br />
        <MenuItem icon={<Users />} text="Usuários" to="" hover={hover} />
        <MenuItem icon={<Rows />} text="Filas" to="" hover={hover} />
        <MenuItem icon={<Conetions />} text="Conexões" to="" hover={hover} />
        <MenuItem icon={<Dashboard />} text="Dashboard" to="" hover={hover} />
        <MenuItem icon={<FastResumes />} text="Relatórios" to="" hover={hover} />
        <MenuItem icon={<Super />} text="Supervisão" to="" hover={hover} />
        <br />
        <MenuItem icon={<Configuration />} text="Configurações" to="" hover={hover} />
      </MenuListStyled>
    </MenuStyled>
  );
};

export default MenuComponent;