import React from "react";

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

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

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

  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>
      <VideoComponent width={"100%"} zIndex={"-1"} position={"absolute"} />
      <MenuListStyled>
        <MenuListItemStyled>link</MenuListItemStyled>
        <MenuListItemStyled>link</MenuListItemStyled>
        <MenuListItemStyled>link</MenuListItemStyled>
        <MenuListItemStyled>link</MenuListItemStyled>
      </MenuListStyled>
    </MenuStyled>
  );
};

export default MenuComponent;