import { listarMenusHistorico } from "@/requests/CRUD/Usuario/cadastrarUsuario";
import { getMenuInfo } from "@/requests/common/Sidebar/sidebar";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useAuth } from "@/src/contexts/authContext";
import { useHistoricoMenuContext } from "@/src/contexts/historicoMenusContext";
import { useRouter } from "next/router";
import { useEffect, useRef, useState } from "react";
import { LuHistory } from "react-icons/lu";

const DropdownMessage = () => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [menuInfo, setMenuInfo] = useState<any>([]);
  const { historicoMenu, setHistoricoMenu } = useHistoricoMenuContext();
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const id_usuario = session.id_usuario;
  const trigger = useRef<any>(null);
  const dropdown = useRef<any>(null);
  const route = useRouter();
  const { isMobile } = useScreenContext();

  // close on click outside
  useEffect(() => {
    const clickHandler = ({ target }: MouseEvent) => {
      if (!dropdown.current) return;
      if (
        !dropdownOpen ||
        dropdown.current.contains(target) ||
        trigger.current.contains(target)
      )
        return;
      setDropdownOpen(false);
    };
    document.addEventListener("click", clickHandler);
    return () => document.removeEventListener("click", clickHandler);
  });
  useEffect(() => {
    // listarMenusHistorico(id_usuario).then((e) => {
    //   setHistoricoMenu(e);
    // });
    getMenuInfo().then((y) => {
      setMenuInfo(y);
    });
  }, []);

  // close if the esc key is pressed
  useEffect(() => {
    const keyHandler = ({ keyCode }: KeyboardEvent) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener("keydown", keyHandler);
    return () => document.removeEventListener("keydown", keyHandler);
  });

  return (
    <li className="relative">
      <div
        ref={trigger}
        onClick={() => {
          setDropdownOpen(!dropdownOpen);
        }}
        className="cursor-pointer relative flex h-8.5 w-8.5 items-center justify-center rounded-full border-[0.5px] border-stroke bg-gray hover:text-primary dark:border-strokedark dark:bg-meta-4 dark:text-white"
      >
        <LuHistory title="Historico" size={19} />
      </div>

      <div
        ref={dropdown}
        onFocus={() => setDropdownOpen(true)}
        onBlur={() => setDropdownOpen(false)}
        className={` ${isMobile ? "left-0 right-0 mx-auto fixed" : "absolute"} -right-16 mt-2.5 flex h-90 w-75 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark sm:right-0 sm:w-80 ${
          dropdownOpen === true ? "block" : "hidden"
        }`}
      >
        <div className="px-4.5 py-3">
          <h5 className="text-sm font-medium text-bodydark2">Histórico</h5>
        </div>

        <ul className="flex h-auto flex-col overflow-y-auto">
          {historicoMenu?.map((e: any, index: any) => {
            const menuPai = menuInfo
              .filter((menuPai: any) => menuPai.id_menu == e.menu_menu)
              .map((res: any) => {
                return res.nome_menu;
              });

            return (
              <li
                className="flex gap-4.5 border-t hover:underline cursor-pointer border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
                key={index}
                onClick={() => {
                  route.push(e.rotina_menu || "CXESCRM002?funil=" + e.id_funil);
                }}
              >
                <div className="relative w-full">
                  <div className="text-sm font-medium  dark:text-stroke">
                    <p className="text-xs">
                      {menuPai.length > 0
                        ? menuPai
                        : e.id_funil != undefined
                          ? "CRM"
                          : e.nome_menu}
                    </p>
                    <p className="text-black dark:text-white">
                      {" "}
                      {e.nome_menu || e.titulo_funil}
                    </p>
                  </div>
                  <div
                    id="notificationInDropDownData"
                    className="absolute top-0 right-0 text-sm"
                  ></div>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
      {/* <!-- Dropdown End --> */}
    </li>
  );
};

export default DropdownMessage;