import GetIcon from "@/components/Icons/IconComponent";

import {
  NavigationMenu,
  NavigationMenuContent,
  // NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
import { guardaMenuHistorico } from "@/requests/CRUD/Usuario/cadastrarUsuario";
import { useHistoricoMenuContext } from "@/src/contexts/historicoMenusContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { MenuSidebarProps } from "@/types/sidebar";
import { Tooltip } from "@mui/material";
import { Grip } from "lucide-react";
import { usePathname } from "next/navigation";
import router from "next/router";
import { useRef } from "react";
import { useDrag, useDrop } from "react-dnd";
import { AiFillStar, AiOutlineStar } from "react-icons/ai";
import * as io from "react-icons/io";
import SidebarLinkGroup from "./SidebarLinkGroup";

const MenusSidebar = ({
  menus,
  setMenus,
  moveFunction,
  menuItem,
  favoritosIndex,
  mouseEncima,
  editingMenu,
  id_usuario,
  setSidebarOpen,
  sidebarOpen,
  menuIndex,
  sidebarExpand,
}: MenuSidebarProps) => {
  const { listarHistoricoMenuFunction } = useHistoricoMenuContext();
  const pathname = usePathname();
  const { isMobile } = useScreenContext();

  const ref = useRef<any>(null);

  const classeSidebar = "justify-center w-fit text-xl";

  let memTime = 0;

  const [{ isDragging }, dragRef] = useDrag({
    type: "menu",
    item: {
      type: "menu",
      index: menuIndex,
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
    end(draggedItem, monitor) {
      // atualizarKanban((kanban: any) => kanban);
    },
  });

  const [, dropRef] = useDrop({
    accept: "menu",
    hover(item: any, monitor) {
      var date = new Date();
      var now = date.getTime();
      if (memTime == 0) memTime = now;

      const draggedIndex = item.index;
      const targetIndex = menuIndex;

      if (draggedIndex === targetIndex) {
        return;
      }
      if (ref.current) {
        const targetSize = ref.current.getBoundingClientRect();
        const targetCenter = (targetSize.bottom - targetSize.top) / 2;

        const draggedOffset = monitor.getClientOffset();
        const draggedTop = draggedOffset!.y - targetSize.top;

        if (draggedIndex < targetIndex && draggedTop < targetCenter) {
          return;
        }
        if (draggedIndex > targetIndex && draggedTop > targetCenter) {
          return;
        }

        moveFunction(draggedIndex, targetIndex);

        item.index = targetIndex;
      }
    },
    drop(item, monitor) {
      var date = new Date();
      var now = date.getTime();
      if (memTime == 0) memTime = now;
      const draggedIndex = item.index;
      const targetIndex = menuItem.index_menu;

      if (ref.current) {
        const targetSize = ref.current.getBoundingClientRect();
        const targetCenter = (targetSize.bottom - targetSize.top) / 2;

        const draggedOffset = monitor.getClientOffset();
        const draggedTop = draggedOffset!.y - targetSize.top;

        if (draggedIndex < targetIndex && draggedTop < targetCenter) {
          return;
        }
        if (draggedIndex > targetIndex && draggedTop > targetCenter) {
          return;
        }
      }
      moveFunction(draggedIndex, targetIndex);
      item.index = targetIndex;
    },
  });

  dragRef(dropRef(ref));

  return (
    <li draggable={false} className=" max-md:rounded-[7px]" ref={ref}>
      <NavigationMenu
        className={`w-full max-w-full max-sm:select-none max-md:text-black   ${
          isDragging &&
          "bg-transparent shadow-none cursor-grabbing  rounded-none border-2 border-dashed border-[rgba(0,0,0,0.2)]"
        }`}
      >
        <NavigationMenuItem
          className={`w-full ${editingMenu && "bg-boxdark-2"} overflow-hidden`}
        >
          <SidebarLinkGroup
            activeCondition={menuItem.menus.some((menuPathValue) => {
              const menuText = "/" + menuPathValue.rotina_menu;
              if (menuText == pathname) {
                return true;
              }
            })}
          >
            {(handleClick, open) =>
              menuItem["id_menu"] && (
                <>
                  <NavigationMenuTrigger
                    className={`flex-col h-auto max-sm:!select-none w-full items-start text-md py-0 `}
                  >
                    <Tooltip
                      title={menuItem.nome_menu}
                      arrow={true}
                      placement="right"
                      disableHoverListener={
                        mouseEncima || menuItem.menus.length > 0
                      } // Desativa o hover
                    >
                      <div
                        className={`w-full select-none group max-md:h-[57px] max-md:text-sm max-md:text-black relative flex items-center cursor-pointer gap-2.5 rounded-md py-2 px-4 ${
                          open &&
                          "lg:bg-primary lg:hover:bg-primary max-md:bg-[#e7e9ec] max-md:bg-opacity-40"
                        } lg:hover:bg-secondaryMenu font-medium  ease-linear transition-all${
                          !mouseEncima && classeSidebar
                        } text-bodydark1 duration-300 ease-in-out  dark:hover:bg-meta-4 `}
                        onClick={(e) => {
                          if (menuItem.rotina_menu) {
                            e.preventDefault();

                            guardaMenuHistorico(
                              menuItem["id_menu"],
                              +id_usuario
                            ).then(() => listarHistoricoMenuFunction());
                            router.push(menuItem.rotina_menu);
                            setSidebarOpen(!sidebarOpen);
                          } else {
                            handleClick();
                          }
                          // setOpenMenu(menuItem.id_menu);
                        }}
                      >
                        {menuItem.icone_menu && (
                          <GetIcon
                            icon={menuItem.icone_menu}
                            size={19}
                            className=""
                          />
                        )}
                        <span
                          className={`${isMobile ? "" : !mouseEncima && "hidden"}`}
                        >
                          {menuItem.tipo_menu === "0" && menuItem.nome_menu}
                          {editingMenu ? (
                            <Grip
                              size={17}
                              className={`absolute right-4 top-[30%]  fill-current`}
                            />
                          ) : (
                            <io.IoIosArrowDown
                              className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
                                open && "rotate-180"
                              } ${menuItem.rotina_menu && "hidden"}`}
                            />
                          )}
                        </span>
                      </div>
                    </Tooltip>
                    <div
                      className={`translate transform overflow-hidden ${
                        (!open || !sidebarExpand) && "hidden"
                      }`}
                    >
                      {!editingMenu && (
                        <ul className="lg:mt-4 mt-[2px] max-md:pl-[20px] mb-5.5 flex flex-col gap-2.5">
                          {menuItem.menus.map((item, index) => {
                            return (
                              <li
                                key={index}
                                className="flex items-center max-md:pl-2"
                              >
                                {item.id_menu &&
                                  menus[favoritosIndex] &&
                                  (menus[favoritosIndex]?.menus.some(
                                    (menuFavorito) =>
                                      menuFavorito.id_menu == item.id_menu
                                  ) ? (
                                    <AiFillStar
                                      onClick={() => {
                                        setMenus((prevMenus) => {
                                          const newMenus = [...prevMenus];
                                          const favoritoIndex = newMenus[
                                            favoritosIndex
                                          ].menus.findIndex(
                                            (menu) =>
                                              menu.id_menu == item.id_menu
                                          );
                                          newMenus[favoritosIndex].menus.splice(
                                            favoritoIndex,
                                            1
                                          );
                                          return newMenus;
                                        });
                                      }}
                                      color="#fcba03"
                                      size={21}
                                      className="ml-2 min-w-[21px]"
                                    />
                                  ) : (
                                    <AiOutlineStar
                                      onClick={() =>
                                        setMenus((prevMenus) => {
                                          const newMenus = [...prevMenus];
                                          newMenus[favoritosIndex]?.menus.push({
                                            ...item,
                                          });

                                          return newMenus;
                                        })
                                      }
                                      size={21}
                                      className="ml-2 min-w-[21px]"
                                    />
                                  ))}
                                <div
                                  onClick={() => {
                                    guardaMenuHistorico(
                                      item["id_menu"],
                                      +id_usuario
                                    ).then(() => listarHistoricoMenuFunction());
                                    router.push(item.rotina_menu);
                                    setSidebarOpen(!sidebarOpen);
                                  }}
                                  className={`group relative  flex text-left py-2 text-sm gap-2.5 rounded-md px-6 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white max-md:text-black ${
                                    pathname === "/" + item.rotina_menu &&
                                    "text-white"
                                  }`}
                                >
                                  {item.nome_menu}
                                </div>
                              </li>
                            );
                          })}
                        </ul>
                      )}
                    </div>
                  </NavigationMenuTrigger>
                  {menuItem.menus[0] && !sidebarExpand && (
                    <div
                      className={`translate transform ${
                        !mouseEncima && "hidden"
                      }  overflow-hidden ${!open && "hidden"}`}
                    >
                      <NavigationMenuContent>
                        <p className="text-lg ml-4 mt-4 text-white">
                          {menuItem.nome_menu}
                        </p>
                        <ul className="flex flex-col md:w-100 p-2">
                          {menuItem.menus.map((item, index) => {
                            return (
                              <li
                                key={index}
                                className="flex items-center cursor-pointer"
                              >
                                {menus[favoritosIndex]?.menus.some(
                                  // <- O ponto de interrogação foi adicionado para casos especificos do usuario ter apenas 1 menu :)
                                  (menuFavorito) =>
                                    menuFavorito.id_menu == item.id_menu
                                ) ? (
                                  <AiFillStar
                                    onClick={() => {
                                      setMenus((prevMenus) => {
                                        const newMenus = [...prevMenus];
                                        const favoritoIndex = newMenus[
                                          favoritosIndex
                                        ].menus.findIndex(
                                          (menu) => menu.id_menu == item.id_menu
                                        );
                                        newMenus[favoritosIndex].menus.splice(
                                          favoritoIndex,
                                          1
                                        );
                                        return newMenus;
                                      });
                                    }}
                                    color="#fcba03"
                                    size={21}
                                    className="ml-2 min-w-[21px]"
                                  />
                                ) : (
                                  <AiOutlineStar
                                    onClick={() =>
                                      setMenus((prevMenus) => {
                                        const newMenus = [...prevMenus];
                                        newMenus[favoritosIndex].menus.push({
                                          ...item,
                                        });

                                        return newMenus;
                                      })
                                    }
                                    size={21}
                                    className="ml-2 min-w-[21px]"
                                  />
                                )}

                                <div
                                  onClick={() => {
                                    guardaMenuHistorico(
                                      item["id_menu"],
                                      +id_usuario
                                    ).then(() => listarHistoricoMenuFunction());
                                    router.push(item.rotina_menu);
                                  }}
                                  className={`group relative flex text-left py-2 text-sm gap-2.5 rounded-md px-6 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ${
                                    pathname === "/" + item.rotina_menu &&
                                    "text-white"
                                  }`}
                                >
                                  {item.nome_menu}
                                </div>
                              </li>
                            );
                          })}
                        </ul>
                      </NavigationMenuContent>
                    </div>
                  )}
                </>
              )
            }
          </SidebarLinkGroup>
        </NavigationMenuItem>
      </NavigationMenu>
    </li>
  );
};

export default MenusSidebar;