import { Tooltip } from "@mui/material";

import { SidebarProps } from "@/types/sidebar";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";

import {
  atualizarFavoritos,
  guardaMenuHistorico,
  guardaSideBarUsuario,
} from "@/requests/CRUD/Usuario/cadastrarUsuario";
import { editarUsuario } from "@/requests/CRUD/Usuario/editarUsuario";
import { listarFunisUsuario } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useAuth } from "@/src/contexts/authContext";
import { useHistoricoMenuContext } from "@/src/contexts/historicoMenusContext";
import { produce } from "immer";
import {
  ArrowLeft,
  ArrowLeftFromLine,
  ArrowRightFromLine,
  Pen,
  Settings,
} from "lucide-react";
import { usePathname } from "next/navigation";
import router from "next/router";
import { IoIosFunnel } from "react-icons/io";
import { toast } from "react-toastify";
import MenusSidebar from "./menus";

const Sidebar = ({
  sidebarOpen,
  setSidebarOpen,
  sidebarClose,
  setSidebarClose,
  setExpandSidebar,
  localToken,
  id_usuario,
  perfil,
  isPageLoaded,
  menus,
  funilFavorito,
  setMenus,
  favoritosIndex,
  setFavoritosIndex,
}: SidebarProps) => {
  const [mouseEncima, setMouseEncima] = useState(true);
  const [sidebarExpand, setSidebarExpand] = useState(sidebarOpen);
  const [isEditingMenu, setIsEditingMenu] = useState(false);
  const [funilPermitido, setFunilPermitido] = useState(false);
  const [permissionFunil, setPermissionFunil] = useState(false);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const pathname = usePathname() as any;
  const { listarHistoricoMenuFunction } = useHistoricoMenuContext();

  const { isMobile } = useScreenContext();

  useEffect(() => {
    if (isMobile) {
      setSidebarExpand(true);
      setExpandSidebar(false);
      setMouseEncima(true);
    }
  }, [isMobile]);

  useEffect(() => {
    if (pathname == "/") return;
    listarFunisUsuario(session.perfil_usuario).then((res: any) => {
      if (res.length > 0) {
        setPermissionFunil(true);
      }
      const funilVendas = res.find(
        (funil: any) => funil.titulo_funil == "Vendas",
      );

      setFunilPermitido(funilVendas?.id_funil || res[0]?.id_funil);
    });
  }, []);

  useEffect(() => {
    if (isPageLoaded) {
      handleAtualizarFavoritos();
    }
  }, [menus]);

  function move(from: any, to: any) {
    if (isEditingMenu) {
      setMenus(
        produce(menus, (draft) => {
          const dragged = draft[from]; // Obtém o item arrastado da lista de origem

          draft.splice(from, 1); // Remove o item da lista de origem
          draft.splice(to, 0, dragged);
        }),
      );
    }
  }

  const handleAtualizarFavoritos = async () => {
    const newFavoritosIndex = menus.findIndex(
      (e: any) => e.nome_menu == "Favoritos",
    );
    setFavoritosIndex(newFavoritosIndex);
    return atualizarFavoritos(
      {
        menu_favoritos_usuario: menus[newFavoritosIndex]?.menus
          .map((menu: any) => menu.id_menu)
          .join(","),
      },
      id_usuario,
    );
  };

  useEffect(() => {
    setSidebarExpand(!sidebarClose);
    setExpandSidebar(!sidebarClose);
    setMouseEncima(!sidebarClose);
    if (isMobile) {
      setSidebarExpand(true);
      setExpandSidebar(false);
      setMouseEncima(true);
    }
  }, [sidebarClose]);

  const expandSidebar = () => {
    const data = {
      id_usuario: session.id_usuario,
      sidebar: sidebarExpand,
    };
    guardaSideBarUsuario(data);
    setSidebarExpand(!sidebarExpand);
    setExpandSidebar(!sidebarExpand);
    setMouseEncima(!mouseEncima);

    if (!sidebarExpand) setSidebarClose(false);
  };
  useEffect(() => {}, [mouseEncima]);

  return (
    <>
      <aside
        className={`absolute  lg:static z-10 h-screen text- flex flex-col items-center max-md:bg-[#F1F5F9] lg:translate-x-0 bg-black duration-300 max-sm:duration-100 ease-linear transition-all ${
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        } ${isMobile ? "w-full" : sidebarExpand ? "w-72.5 max-sm:w-full" : "w-15"}`}
        style={{ height: isMobile ? "calc(100vh - 60px)" : "" }}
      >
        {/* <!-- SIDEBAR HEADER --> */}
        <div className="flex items-center max-sm:mt-[55px] self-center	gap-2  px-6 py-5.5 lg:py-6.5">
          <Link href="/CXESCRM004">
            {mouseEncima ? (
              <Image
                width={isMobile ? "200" : "162"}
                className="md:max-w-35 "
                height={25}
                src={"/images/logo/linksun.png"}
                alt="Logo"
              />
            ) : (
              <Image
                width={162}
                className="max-w-11 "
                height={25}
                src={"/images/logo/linksunLk.png"}
                alt="Logo"
              />
            )}
          </Link>
          <button
            onClick={() => setSidebarOpen(!sidebarOpen)}
            aria-controls="sidebar"
            aria-expanded={sidebarOpen}
            className="block absolute lg:bg-[#141a27] max-sm:text-black rounded-md p-1 right-4 top-3 lg:hidden"
          >
            <ArrowLeft size={20} />
          </button>
        </div>

        <div className="no-scrollbar pb-6 max-sm:select-none flex flex-col overflow-y-auto w-full duration-300 ease-out">
          {/* <!-- Sidebar Menu --> */}
          <nav
            className={`mt-1 ${sidebarExpand ? "relative" : "absolute"} max-md:px-[28px] max-md:w-full lg:mt-9 ${
              mouseEncima && "lg:px-6"
            }`}
          >
            <div className="pb-9">
              {/* <div className='list-none pb-5 '>
                <Link
                  onClick={() => setSidebarOpen(!sidebarOpen)}
                  href="CXESCRM005" // You need to specify the correct href for child items
                  className={`group relative flex items-center gap-2.5 rounded-md mb-4 py-2 px-4 ${
                    mouseEncima ? "" : "justify-center text-xl w-fit"
                  }  bg-secondary font-medium  transition-all text-black duration-300 ease-in-out  dark:hover:bg-meta-4}`}
                >
                  <AiOutlinePlus />
                  <span className={`${mouseEncima ? "" : "hidden"}`}>
                    Nova Proposta
                  </span>
                </Link>
              </div> */}
              {permissionFunil && (
                <Tooltip
                  title="Fluxo"
                  arrow={true}
                  placement="right"
                  disableHoverListener={mouseEncima} // Desativa o hover
                >
                  <div className="list-none cursor-pointer max-md:active:bg-[#e7e9ec] max-md:bg-opacity-40 max-md:rounded-[7px]">
                    <div
                      onClick={() => {
                        guardaMenuHistorico(
                          { funil: funilFavorito || funilPermitido },
                          +id_usuario,
                        ).then(() => listarHistoricoMenuFunction());
                        router.push(
                          "CXESCRM002?funil=" +
                            (funilFavorito || funilPermitido),
                        );
                        isMobile && setSidebarOpen(!sidebarOpen);
                      }}
                      className={`group relative flex items-center gap-2.5 py rounded-md mb-2 max-md:text-black max-md:h-[57px] max-md:text-sm  max-md:w-full py-2 px-4 cursor-pointer${
                        isMobile
                          ? ""
                          : mouseEncima
                            ? ""
                            : "justify-center text-xl w-fit"
                      }  font-medium  transition-all  lg:hover:bg-secondaryMenu text-bodydark1 duration-300 ease-in-out  dark:hover:bg-meta-4}`}
                    >
                      <IoIosFunnel size={19} />
                      <span
                        className={`${isMobile ? "" : mouseEncima ? "" : "hidden"}`}
                      >
                        Fluxo de Processos
                      </span>
                    </div>
                  </div>
                </Tooltip>
              )}
              <ul className="flex flex-col gap-2 min-h-2">
                {menus &&
                  menus[0] &&
                  menus.map((menuItem, index) => (
                    <MenusSidebar
                      key={index}
                      sidebarExpand={sidebarExpand}
                      sidebarOpen={sidebarOpen}
                      setSidebarOpen={setSidebarOpen}
                      mouseEncima={mouseEncima}
                      // key={menuItem.id_menu}
                      moveFunction={move}
                      id_usuario={id_usuario}
                      editingMenu={isEditingMenu}
                      favoritosIndex={favoritosIndex}
                      menuItem={menuItem}
                      menuIndex={index}
                      setMenus={setMenus}
                      menus={menus}
                    />
                  ))}
              </ul>
              {isMobile && (
                <div className="list-none cursor-pointer max-md:active:bg-[#e7e9ec] max-md:bg-opacity-40 max-md:rounded-[7px]">
                  <div
                    onClick={() => {
                      guardaMenuHistorico(
                        { funil: funilFavorito || funilPermitido },
                        +id_usuario,
                      ).then(() => listarHistoricoMenuFunction());
                      router.push("/CXESCFG001");
                      setSidebarOpen(!sidebarOpen);
                    }}
                    className={`group relative flex items-center gap-2.5 py rounded-md mb-2 max-md:text-black max-md:h-[57px] max-md:text-sm  max-md:w-full py-2 px-4 cursor-pointer${
                      isMobile
                        ? ""
                        : mouseEncima
                          ? ""
                          : "justify-center text-xl w-fit"
                    }  font-medium  transition-all  lg:hover:bg-secondaryMenu text-bodydark1 duration-300 ease-in-out  dark:hover:bg-meta-4}`}
                  >
                    <Settings size={19} />
                    <span
                      className={`${isMobile ? "" : mouseEncima ? "" : "hidden"}`}
                    >
                      Configurações
                    </span>
                  </div>
                </div>
              )}
            </div>
          </nav>
        </div>
        <div
          className={`w-full max-sm:hidden flex h-15 bottom-0 ${
            sidebarExpand && "px-4"
          }  gap-1 items-center z-999 fixed bg-[inherit] justify-center`}
        >
          <Tooltip
            title="Editar Menu"
            arrow={true}
            // className="hidden"
          >
            <div
              onClick={() => {
                setIsEditingMenu((prev) => {
                  if (prev == true) {
                    const loadingPdf = new Promise((resolve, reject) => {
                      editarUsuario(
                        {
                          id_usuario,
                          ordem_menus_usuario: menus
                            .map((menu) => menu.id_menu)
                            .join(","),
                        },
                        true,
                      )
                        .then((res) => {
                          resolve("Salvo");
                        })
                        .catch((err) => {
                          reject("Erro ao tentar salvar");
                        });
                    });

                    toast.promise(loadingPdf, {
                      pending: {
                        render(data: any) {
                          return "Aguarde";
                        },
                      },
                      success: {
                        render(data: any) {
                          return "Ordenação Salva!";
                        },
                      },
                      error: {
                        render(data: any) {
                          return data.data;
                        },
                      },
                    });
                  }
                  return !prev;
                });
              }}
              className={` rounded py-2  ${
                !sidebarExpand && "hidden"
              }   transition-all duration-700 ease-linear justify-center flex w-9 cursor-pointer bg-[#141a27] text-white `}
            >
              <Pen size={17} />
            </div>
          </Tooltip>

          <Tooltip
            title={sidebarExpand ? "Retrair Menu" : "Expandir Menu"}
            arrow={true}
          >
            <div
              onClick={expandSidebar}
              className={`flex cursor-pointer bg-[#141a27] z-99999 rounded py-2 ${
                sidebarExpand ? "w-60" : "px-4"
              } transition-all duration-700 ease-linear text-white justify-center`}
            >
              {sidebarExpand ? (
                <ArrowLeftFromLine size={17} />
              ) : (
                <ArrowRightFromLine size={17} />
              )}
            </div>
          </Tooltip>
        </div>
      </aside>
    </>
  );
};

export default Sidebar;