import { listarMenusHistorico } from "@/requests/CRUD/Usuario/cadastrarUsuario";
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 DropdownHistorico = () => {
  const [anchorEl, setAnchorEl] = useState(null);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const id_usuario = session.id_usuario;
  const { historicoMenu, setHistoricoMenu } = useHistoricoMenuContext();
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const trigger = useRef<any>(null);
  const dropdown = useRef<any>(null);
  const route = useRouter();

  // useEffect(() => {
  //   listarMenusHistorico(id_usuario).then((e) => {
  //     setHistoricoMenu(e);
  //   });
  // }, []);

  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);
  });

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <li className="relative">
      <div
        ref={trigger}
        onClick={() => {
          setDropdownOpen(!dropdownOpen);
        }}
        // href="#"
        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 size={19} />
      </div>

      <div
        id="notificationsDropdown"
        ref={dropdown}
        onFocus={() => setDropdownOpen(true)}
        onBlur={() => setDropdownOpen(false)}
        className={`absolute -right-27 mt-2.5 flex h-75 w-[430px] flex-col rounded-lg m-0 border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark sm:right-0 overflow-hidden ${
          dropdownOpen === true ? "block" : "hidden"
        }`}
      >
        <div
          id="notificationsDropdownHead"
          className="px-[8px] py-[16px] flex flex-col items-center bg-[linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)] dark:bg-[linear-gradient(120deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.88) 100%)]"
        >
          <div className="font-bold">Histórico De Menus</div>
        </div>
        <div
          id="notificationsDropdownBody"
          className="p-3 h-[278px] overflow-x-hidden w-full"
        >
          <ul
            id="notificationsDropdownList"
            className="relative flex flex-col gap-1 before:content-[''] before:absolute before:top-0 before:left-3 before:h-full before:w-1 before:bg-body before:rounded-sm"
          >
            {historicoMenu?.map((e: any, index: any) => (
              <li
                className="flex flex-row relative cursor-pointer p-2 hover:bg-black-2 hover:bg-opacity-10 rounded-lg gap-1"
                key={index}
                onClick={() => {
                  route.push(e.rotina_menu || "CXESCRM002?funil=" + e.id_funil);
                }}
              >
                <span
                  className="relative w-4 h-4 -left-[1px] rounded-full bg-secondaryMenu dark:bg-[rgb(36,48,63)] shadow-[0_0_0_3px_#fff] dark:shadow-[0_0_0_3px_rgb(36,48,63)]"
                  style={{
                    border: `2px solid blue`,
                  }}
                ></span>
                <div className="relative w-full">
                  <div id="notificationInDropDownBody">
                    <p> {e.nome_menu || e.titulo_funil}</p>
                  </div>
                  <div
                    id="notificationInDropDownData"
                    className="absolute top-0 right-0 text-sm"
                  ></div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </li>
  );
  // <div>
  //   <Tooltip title="Histórico de menus">
  //     <div
  //       className="rounded-full border-stroke bg-gray hover:text-primary dark:border-strokedark dark:bg-meta-4 p-2 cursor-pointer right-0"
  //       aria-describedby={id}
  //       onClick={handleClick}
  //     >
  //       <LuHistory size={19} />
  //     </div>
  //   </Tooltip>
  //   <Popover
  //     id={id}
  //     open={open}
  //     anchorEl={anchorEl}
  //     onClose={handleClose}
  //     anchorOrigin={{
  //       vertical: "bottom",
  //       horizontal: "right",
  //     }}
  //     transformOrigin={{
  //       vertical: "top",
  //       horizontal: "right",
  //     }}
  //   >
  //     <div
  //       id="notificationsDropdownBody"
  //       className="p-3 h-[278px] overflow-x-hidden w-full"
  //     >
  //       <ul
  //         id="notificationsDropdownList"
  //         className="relative flex flex-col gap-1 before:content-[''] before:absolute before:top-0 before:left-3 before:h-full before:w-1 before:bg-body before:rounded-sm"
  //       >
  //         {historicoMenu.map((e: any, index: any) => (
  //           <li
  //             className="flex flex-row relative cursor-pointer p-2 hover:bg-black-2 hover:bg-opacity-10 rounded-lg gap-1"
  //             key={index}
  //             onClick={() => {
  //               router.push(e.rotina_menu || "CXESCRM002?funil=" + e.id_funil);
  //             }}
  //           >
  //             <span className="relative w-4 h-4 -left-[1px] rounded-full bg-white dark:bg-[rgb(36,48,63)] shadow-[0_0_0_3px_#fff] dark:shadow-[0_0_0_3px_rgb(36,48,63)]"></span>
  //             <div className="relative w-full">
  //               <div id="notificationInDropDownBody">
  //                 <h4 className="font-bold"></h4>
  //                 <p> {e.nome_menu || e.titulo_funil}</p>
  //               </div>
  //               <div
  //                 id="notificationInDropDownData"
  //                 className="absolute top-0 right-0 text-sm"
  //               ></div>
  //             </div>
  //           </li>
  //         ))}
  //       </ul>
  //     </div>
  //     {/* <div className="flex flex-row gap-3 p-4">
  //       {historicoMenu[0] ? (
  //         historicoMenu.map((e: any) => (
  //           <>
  //             <span
  //               className="cursor-pointer hover:text-primary rounded-3xl border border-graydark bg-stroke p-2 flex justify-center items-center"
  //               onClick={() => {
  //                 router.push(e.rotina_menu || "CXESCRM002?funil=" + e.id_funil);
  //               }}
  //             >
  //               {e.nome_menu || e.titulo_funil}
  //             </span>
  //           </>
  //         ))
  //       ) : (
  //         <span className="hover:text-primary">Sem Menus Acessados Posteriomente</span>
  //       )}
  //     </div> */}
  //   </Popover>
  // </div>
};

export default DropdownHistorico;