import { Button } from "@/components/ui/button";
import ConsultaCategorias from "@/pages/categorias";
import ConsultaInstituicaoFinanceira from "@/pages/CXESCAD006";
import ConsultaTiposTelhados from "@/pages/CXESCAD008";
import ConsultaEstruturaFixacao from "@/pages/CXESCAD009";
import ConsultaOrigens from "@/pages/CXESCAD010";
import ConsultaMotivosNegociosPerdidos from "@/pages/CXESCAD011";
import FabricanteComponent from "@/pages/CXESCAD063";
import ConsultaMotivosNegociosRestaurados from "@/pages/CXESCAD064";
import { editarDocumentoPersonalizado } from "@/requests/CRUD/DocumentosPersonalizados/editarDocumentoPersonalizado";
import { editarLojas } from "@/requests/CRUD/Lojas/editarLojas";
import { listarPerfil } from "@/requests/CRUD/Perfil/listarPerfil";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { AnimatePresence, motion } from "framer-motion";
import { ArrowLeft, Settings, TextCursorInput } from "lucide-react";
import React, { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { BsDownload } from "react-icons/bs";
import {
  FaBell,
  FaBuilding,
  FaChevronDown,
  FaChevronUp,
  FaRegEdit,
  FaSolarPanel,
  FaUserCog,
  FaUserEdit,
} from "react-icons/fa";
import { GoWorkflow } from "react-icons/go";
import { IoStorefront } from "react-icons/io5";
import { LuFileStack, LuFileText, LuTrash2 } from "react-icons/lu";
import { MdOutlineMarkEmailRead } from "react-icons/md";
import { RiFileTransferFill } from "react-icons/ri";
import ConsultaKitsDistribuidores from "../CXESCAD016";
import ConsultaAterramento from "../CXESCAD026/Aterramento/aterramento";
import ConsultaCabo from "../CXESCAD026/Cabo/cabo";
import ConsultaConector from "../CXESCAD026/Conector/conector";
import ConsultaDisjuntor from "../CXESCAD026/Disjuntores/disjuntor";
import ConsultaDps from "../CXESCAD026/Dps/dps";
import ConsultaEstacao from "../CXESCAD026/Estacao/estacao";
import ConsultaEstrutura from "../CXESCAD026/Estrutura/estrutura";

import { FaRepeat } from "react-icons/fa6";
import ConsultaBateria from "../CXESCAD026/Bateria/bateria";
import ConsultaInversor from "../CXESCAD026/Inversor/inversor";
import ConsultaItemComposto from "../CXESCAD026/ItensCompostos/itensCompostos";
import ConsultaModulo from "../CXESCAD026/Modulo/modulo";
import ConsultaMonitoramento from "../CXESCAD026/Monitoramento/monitoramento";
import ConsultaOutros from "../CXESCAD026/Outros/outros";
import ConsultaPerfilAluminio from "../CXESCAD026/PerfisALuminio/perfisAluminio";
import RelatorioItensKit from "../CXESCAD026/RelatorioItensKit/relatorioItensKit";
import ConsultaStringBox from "../CXESCAD026/StringBox/stringBox";
import ConsultaSuporte from "../CXESCAD026/Suporte/suporte";
import ConsultaTabelaPreco from "../CXESCAD026/TabelaPrecos/tabelaPrecos";
import ConsultaTerminal from "../CXESCAD026/Terminal/terminal";
import PerdasMediasComponent from "../CXESCAD065";
import ConsultaTiposEdificacao from "../CXESCAD072";
import FomParametrosAutomatizacaoComponent from "./Automatizacao";
import CamposPersonalizadosComponent from "./CamposPersonalizados";
import ConcessionariasTarifasComponent from "./ConcessionariasTarifas";
import CondicoesPagamento from "./CondicoesPagamento";
import DistribuidoresConfigComponent from "./Distribuidores";
import DocumentosPersonalizados from "./DocumentosPersonalizados";
import FormDocumentosPersonalizados from "./DocumentosPersonalizados/FormDocumentosPersonalizados";
import EmpresasTerceiras from "./EmpresasTerceiras";
import ExportarImportarBasesComponent from "./ExportarImportarBases";
import FormaPagamento from "./FormaPagamento";
import InstituicoesBancarias from "./InstituicoesBancarias";
import LimpezaBaseComponent from "./LimpezaBase";
import LixeiraConfigComponent from "./Lixeira";
import LojasView from "./Lojas";
import FormLojas from "./Lojas/formLojas";
import ModeloEmailComponent from "./ModeloEmail";
import NavItem from "./NavItem";
import NotificacaoComponent from "./Notificacao";
import PerfilComponent from "./Perfil";
import PropostaComponent from "./Proposta";
import TransferenciaContatoProjeto from "./TransferenciaContatoProjeto";
import TransferenciaContatos from "./TransferenciaContatos";
import TransferenciaLinhaPendencias from "./TransferenciaLinhaPendencias";
import TransferenciaLoja from "./TransferenciaLojas";
import TransferenciaNegocios from "./TransferenciaNegocios";
import UsuarioComponent from "./Usuario";

const IndexCfg = () => {
  const [menuView, setMenuView] = useState<boolean>(false);
  const [titlePage, setTitlePage] = useState("");
  const [isOpen, setOpen] = useState<[boolean, number]>([false, 0]);
  const [activeSubmenuKitManual, setActiveSubmenuKitManual] =
    useState<number>(0);
  const { menuOnView, goBack, menuStack, resetMenu, isMobile } =
    useScreenContext();
  const [openMenuSide, setOpenMenuSide] = useState<boolean>(false);
  const [hiddenBackMenu, setHiddenBackMenu] = useState<boolean>(false);
  const [clickedOnMenu, setClickedOnMenu] = useState<[boolean, string]>([
    false,
    "Configurações",
  ]);
  const [funis, setFunis] = useState<any[]>([]);
  const [etapas, setEtapas] = useState<any[]>([]);
  const [inStoreOptions, setInStoreOptions] = useState<[boolean, any]>([
    false,
    null,
  ]);
  const [selectedMenuState, setSelectedMenuState] = useState<any>("Lojas");
  const [isOpenedSomeMenu, setIsOpenedSomeMenu] = useState(false);
  const [perfis, setPerfis] = useState<any[]>([]);

  const [docsPersonalizados, setDocsPersonalizados] = useState([false, {}]);
  const [activeSubmenu, setActiveSubmenu] = useState<{
    name: string;
    component: (() => JSX.Element) | null;
  } | null>(null);

  const [navMenus, setNavMenus] = useState<
    {
      name: string;
      component: (() => JSX.Element) | any;
      selected: boolean;
      subMenu?: any;
      icon: JSX.Element;
      props?: any;
    }[]
  >([]);

  let selectedMenu = navMenus.find((menu) => menu.selected);
  let SelectedComponent = selectedMenu?.component;
  let selectedSubMenu = selectedMenu?.subMenu?.find(
    (menu: any) => menu.selected
  );
  let selectedProps = selectedMenu?.props || {};

  useEffect(() => {
    selectedMenu = navMenus.find((menu) => menu.selected);
    selectedSubMenu = selectedMenu?.subMenu?.find((menu: any) => menu.selected);
    SelectedComponent = selectedMenu?.component;
    selectedProps = selectedMenu?.props || {};
  }, [navMenus, selectedMenuState]);

  const handleMenuItemClick = (index: number) => {
    setTitlePage("");
    setActiveSubmenu(null);
    setNavMenus((prevNavMenus) =>
      prevNavMenus.map((nav, i) => ({
        ...nav,
        selected: index < 1000 && i === index,
      }))
    );
  };
  const handleSubMenuItemClick = (index: number, param?: any) => {
    setNavMenus((prevNavMenus) =>
      prevNavMenus.map((nav, i) => {
        if (i === 1) {
          setTitlePage(
            param?.name === "Itens do Kit"
              ? subMenusItensKitmanual[activeSubmenuKitManual]?.name
              : param?.name
          );

          return {
            ...nav,
            selected: true,
            component:
              param?.name === "Itens do Kit"
                ? subMenusItensKitmanual[activeSubmenuKitManual]?.component
                : param?.component,
          };
        } else if (i === 7) {
          setTitlePage(param?.name);

          // return {
          //   ...nav,
          //   selected: true,
          //   component: param?.component,
          // };
        }
        return {
          ...nav,
          selected: index < 1000 && i === index,
        };
      })
    );
  };

  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const [menuMinimized, setMenuMinimized] = useState(false);
  let subMenusCadGeral: any = [];
  let subMenusKit: any = [];
  let subMenusTransferencias: any = [];
  let subMenusMeta: any = [];
  let subMenusItensKitmanual: any = [];
  subMenusItensKitmanual = [
    {
      name: "Consulta Inversor",
      component: ConsultaInversor,
    },

    {
      name: "Consulta Módulo",
      component: ConsultaModulo,
    },
    {
      name: "Consulta Estrutura",
      component: ConsultaEstrutura,
    },
    {
      name: "Consulta Bateria",
      component: ConsultaBateria,
    },
    {
      name: "Consulta Cabo",
      component: ConsultaCabo,
    },
    {
      name: "Consulta Aterramento",
      component: ConsultaAterramento,
    },

    {
      name: "Consulta Conector",
      component: ConsultaConector,
    },

    {
      name: "Consulta Perfil Alumínio",
      component: ConsultaPerfilAluminio,
    },
    {
      name: "Consulta Suporte",
      component: ConsultaSuporte,
    },

    {
      name: "Consulta Terminal",
      component: ConsultaTerminal,
    },
    {
      name: "Consulta Disjuntor",
      component: ConsultaDisjuntor,
    },
    {
      name: "Consulta Dps",
      component: ConsultaDps,
    },

    {
      name: "Consulta Monitoramento",
      component: ConsultaMonitoramento,
    },
    {
      name: "Consulta Estação",
      component: ConsultaEstacao,
    },
    {
      name: "Consulta Outros",
      component: ConsultaOutros,
    },
    {
      name: "Consulta StringBox",
      component: ConsultaStringBox,
    },
    {
      name: "Consulta Itens Compostos",
      component: ConsultaItemComposto,
    },
    {
      name: "Consulta Tabela de Preço",
      component: ConsultaTabelaPreco,
    },
  ];
  subMenusTransferencias = [
    {
      name: "Transferência de Responsáveis dos Negócios",
      component: TransferenciaNegocios,
    },
    {
      name: "Transferência de Responsáveis dos Contatos",
      component: TransferenciaContatos,
    },
    {
      name: "Transferência de Contato do Projeto",
      component: TransferenciaContatoProjeto,
    },
    {
      name: "Transferência de Loja dos Negócios",
      component: TransferenciaLoja,
    },
    {
      name: "Transferência de Linha de Pendências dos Negócios",
      component: TransferenciaLinhaPendencias,
    },
  ];

  useEffect(() => {
    if (titlePage != "" && titlePage != "Itens do Kit") setTitlePage("");

    subMenusCadGeral = [
      {
        name: "Tipos de Estrutura",
        component: ConsultaEstruturaFixacao,
      },
      {
        name: "Fabricante",
        component: FabricanteComponent,
      },
      session?.sigla?.toLowerCase() != "elb"
        ? {
            name: "Juros de Instituições Financeiras",
            component: ConsultaInstituicaoFinanceira,
          }
        : null,
      // session?.sigla?.toLowerCase() != "elb"
      // ?
      // {
      //     name: "Itens do Kit Manual",
      //     function: setOpenMenuSide,
      //     component:
      //       subMenusItensKitmanual[activeSubmenuKitManual]?.component,
      //   }
      // : null,
      {
        name: "Motivos de Negócios Perdidos",
        component: ConsultaMotivosNegociosPerdidos,
      },
      {
        name: "Motivos de Negócios Restaurados",
        component: ConsultaMotivosNegociosRestaurados,
      },
      {
        name: "Tipos de Telhados",
        component: ConsultaTiposTelhados,
      },
      {
        name: "Tipos de Edificação",
        component: ConsultaTiposEdificacao,
      },
      {
        name: "Categoria de Anexos de Arquivos",
        component: ConsultaCategorias,
      },
      // {
      //   name: "Transferir Projetos e Contatos",
      //   component: TransferirProjeto,
      // },
      {
        name: "Origem do Contato",
        component: ConsultaOrigens,
      },
      // {
      //   name: "Indicadores",
      //   component: ConsultaIndicadores,
      // },
      {
        name: "Perdas Médias",
        component: PerdasMediasComponent,
      },
    ];
    subMenusKit = [
      {
        name: "Itens do Kit",
        function: setOpenMenuSide,

        component: subMenusItensKitmanual[activeSubmenuKitManual]?.component,
      },
      {
        name: "Kits - Distribuidores",
        component: ConsultaKitsDistribuidores,
      },
      {
        name: "Relatório Itens do Kit",
        component: RelatorioItensKit,
      },
    ];
  }, [openMenuSide]);

  useEffect(() => {
    const menus = [
      {
        id: 1,
        name: "Automação de Ações",
        component: FomParametrosAutomatizacaoComponent,
        selected: false,
        icon: <GoWorkflow title="Automações de Ações" size={18} />,
      },
      {
        id: 2,
        name: "Cadastros Gerais",
        component: null,
        selected: false,
        icon: <FaRegEdit title="Cadastros Gerais" size={18} />,
        subMenu: subMenusCadGeral.filter((e: any) => e != null),
      },
      {
        id: 3,
        name: "Distribuidores/Fornecedores",
        component: DistribuidoresConfigComponent,
        selected: false,
        icon: <FaRepeat title="Distribuidores" size={18} />,
      },
      {
        id: 4,
        name: "Concessionárias/Tarifas",
        component: ConcessionariasTarifasComponent,
        selected: false,
        icon: <FaRepeat title="Concessionarias/Tarifas" size={18} />,
      },
      {
        id: 5,
        name: "Documentos Personalizados",
        component: DocumentosPersonalizados,
        selected: false,
        icon: <LuFileText title="Documentos Personalizados" size={18} />,
        props: { setDocsPersonalizados },
      },
      {
        id: 6,
        name: "Campos Personalizados",
        component: CamposPersonalizadosComponent,
        selected: false,
        icon: <TextCursorInput size={19} />,
      },
      {
        id: 7,
        name: "Lixeira",
        component: LixeiraConfigComponent,
        selected: false,
        icon: <LuTrash2 title="Lixeira" size={18} />,
      },
      {
        id: 8,
        name: "Lojas",
        component: LojasView,
        selected: true,
        icon: <IoStorefront title="Lojas" size={18} />,
        props: { setInStoreOptions },
      },
      {
        id: 9,
        name: "Central de Notificações",
        component: NotificacaoComponent,
        selected: false,
        icon: <FaBell title="Central de Notificações" size={18} />,
      },
      {
        id: 10,
        name: "Modelo de Notificações",
        component: ModeloEmailComponent,
        selected: false,
        icon: (
          <MdOutlineMarkEmailRead title="Modelo de Notificações" size={18} />
        ),
      },
      {
        id: 11,
        name: "Perfis de Usuário",
        component: PerfilComponent,
        selected: false,
        icon: <FaUserCog title="Perfis de Usuário" size={18} />,
      },
      {
        id: 12,
        name: "Parâmetros",
        component: PropostaComponent,
        selected: false,
        icon: <LuFileStack title="Parâmetros" size={18} />,
      },
      {
        id: 13,
        name: "Kits",
        component: null,
        selected: false,
        icon: <FaSolarPanel title="Kits" size={18} />,
        subMenu: subMenusKit.filter((e: any) => e != null),
      },
      {
        id: 14,
        name: "Usuários",
        component: UsuarioComponent,
        selected: false,
        icon: <FaUserEdit title="Usuários" size={18} />,
      },
      {
        id: 15,
        name: "Empresas Terceiras",
        component: EmpresasTerceiras,
        selected: false,
        icon: <FaBuilding title="Empresas Terceiras" size={18} />,
      },
      {
        id: 16,
        name: "Transferências",
        component: null,
        selected: false,
        icon: <RiFileTransferFill title="Transferências" size={18} />,
        subMenu: subMenusTransferencias.filter((e: any) => e != null),
      },
      {
        id: 17,
        name: "Condições de pagamento",
        component: CondicoesPagamento,
        selected: false,
        icon: <FaUserEdit title="Condições de Pagamento" size={18} />,
      },
      {
        id: 18,
        name: "Instituições Financeiras",
        component: InstituicoesBancarias,
        selected: false,
        icon: <FaUserEdit title="Instituições Financeiras" size={18} />,
      },
      {
        id: 20,
        name: "Limpeza de Base",
        component: LimpezaBaseComponent,
        selected: false,
        icon: <LuTrash2 title="Limpeza de Base" size={18} />,
      },
      {
        id: 19,
        name: "Exportar/Importar Bases",
        component: ExportarImportarBasesComponent,
        selected: false,
        icon: <BsDownload title="Exportar/Importar Bases" size={18} />,
      },
      {
        id: 21,
        name: "Formas de pagamento",
        component: FormaPagamento,
        selected: false,
        icon: <FaUserEdit title="Formas de Pagamento" size={18} />,
      },
    ];
    listarPerfil(session.perfil_usuario).then((res) => {
      const permissoesMenuCfg = res.permissoes_menu_cfg_perfil
        .split("^")
        .filter((item: string) => item !== "")
        .map((s: any) => Number(s));

      const temPermissaoCadastrosGerais = permissoesMenuCfg.includes(2);
      const ehPerfilAdministrador = session.perfil_usuario == "1000";

      setNavMenus(
        menus.filter(
          (m: any) =>
            permissoesMenuCfg.includes(m.id) ||
            (m.id === 20 && ehPerfilAdministrador)
        )
      );
    });
  }, []);
  function backMenuLoja() {
    setInStoreOptions([false, null]);
  }
  const editLojas = async (data: FieldValues) => {
    data["id_loja"] =
      typeof inStoreOptions[1] === "object" && inStoreOptions[1] !== null
        ? inStoreOptions[1].id_loja
        : undefined;

    const formData = new FormData();
    Object.keys(data).forEach((key) => {
      formData.append(key, data[key]);
    });
    return editarLojas(data).then(() => {
      // listarLojas().then((res) => setLojas(res));
      // setOpenModalEdit(!openModalEdit);
    });
  };
  return inStoreOptions[0] ? (
    <div className=" bg-white dark:bg-black-2/30 p-4 rounded-md">
      {!hiddenBackMenu && (
        <div onClick={() => backMenuLoja()}>
          <ArrowLeft />
        </div>
      )}
      <div className="">
        <FormLojas
          onSubmitFunction={editLojas}
          defaultValues={inStoreOptions[1]}
          tipoFormulario="Edicao"
          backMenuLoja={backMenuLoja}
          setHiddenBackMenu={setHiddenBackMenu}
        />
      </div>
    </div>
  ) : docsPersonalizados[0] ? (
    <div className=" bg-white p-4 rounded-md">
      <div onClick={() => setDocsPersonalizados([false, {}])}>
        <ArrowLeft />
      </div>
      <FormDocumentosPersonalizados
        defaultValues={docsPersonalizados[1]}
        onSubmitFunction={editarDocumentoPersonalizado}
      >
        <div className="flex w-full justify-end sticky left-[100%] bottom-0 p-2 bg-white dark:bg-black">
          <Button className=" bg-success rounded-md">Salvar</Button>
        </div>
      </FormDocumentosPersonalizados>
    </div>
  ) : (
    <div
      className={`max-sm:overflow-hidden max-sm:w-full lg:h-full  dark:bg-boxdark-2`}
    >
      {menuView && (
        <>
          <p
            onClick={() => {
              setClickedOnMenu([false, "Configurações"]);
              setIsOpenedSomeMenu(true);
            }}
            className={`text-sm mb-4 pl-2 gap-2 dark:text-white flex items-center`}
          >
            {!clickedOnMenu[0] ? (
              <Settings size={18} />
            ) : (
              !menuOnView && <ArrowLeft size={18} />
            )}
            {!menuMinimized && clickedOnMenu[1]}
          </p>
          <div className="h-5/6 no-scrollbar overflow-auto">
            {!clickedOnMenu[0] && (
              <ul
                className={`list-none top-1  ${menuMinimized ? "w-[80px]" : "w-[250px]"}`}
              >
                {navMenus?.map((menu, index) => (
                  <React.Fragment key={`${menu.name}_${index}`}>
                    <NavItem
                      selected={selectedMenu}
                      index={index}
                      key={`${menu.name}_${index}`}
                      arrayLength={navMenus.length}
                      onClick={() => handleMenuItemClick(index)}
                    >
                      <span className={`flex  items-center  gap-2 `}>
                        {menu.icon}
                        {!menuMinimized && <span>{menu.name}</span>}
                      </span>
                    </NavItem>
                  </React.Fragment>
                ))}
              </ul>
            )}
            {clickedOnMenu[0] && (
              <section
                className={`overflow-x-auto py-5 p-2 bg-white dark:bg-boxdark-2 transition-all duration-300 w-full`}
              >
                {SelectedComponent && <SelectedComponent />}
              </section>
            )}
          </div>
        </>
      )}

      <div className={`flex flex-row lg:h-full transition-all duration-300 `}>
        {openMenuSide && !menuOnView && (
          <button
            onClick={() => setOpenMenuSide(false)}
            className="p-2  absolute"
          >
            <ArrowLeft size={20} />
          </button>
        )}
        {isOpenedSomeMenu && !menuOnView && (
          <button
            onClick={() => setIsOpenedSomeMenu(false)}
            className="p-2  absolute"
          >
            <ArrowLeft size={20} />
          </button>
        )}
        {!isOpenedSomeMenu && (
          <ul
            id="MenuSidebarCadastrosGerais"
            className={`list-none lg:h-full transition-all max-sm:text-sm max-sm:grid max-sm:mt-4 max-sm:h-[89vh] ${isOpen && "overflow-auto h-[650px]"} ${menuMinimized ? "w-[80px]" : "w-[335px]"} top-2 max-sm:w-full max-sm:px-4 `}
          >
            {!openMenuSide ? (
              navMenus?.map((menu, index) => (
                <React.Fragment key={`${menu.name}_${index}`}>
                  <div
                    className={`cursor-pointer lg:overflow-auto max-sm:font-medium max-sm:text-black lg:font-bold  select-none items-center w-65 max-sm:w-full flex justify-center whitespace-nowrap`}
                  >
                    <li className={`h-fit w-full  ease-linear cursor-pointer`}>
                      <div className="flex items-center"></div>
                      <span
                        className={`items-center gap-2 w-auto ${["Cadastros Gerais", "Metas", "Kits", "Transferências"].includes(menu.name) ? "grid" : "flex"}`}
                      >
                        <div
                          className={`flex my-[2px] duration-150 justify-between items-center h-fit w-full px-2 py-2 rounded-md text-sm overflow-hidden text-ellipsis transition-all ease-linear cursor-pointer ${
                            selectedMenuState == menu.name
                              ? "md:bg-stroke text-black-2 dark:text-white dark:bg-black"
                              : "bg-transparent hover:bg-stroke hover:text-black-2"
                          }`}
                          onClick={() => {
                            [
                              "Cadastros Gerais",
                              "Metas",
                              "Kits",
                              "Transferências",
                            ].includes(menu.name)
                              ? (setOpen([!isOpen[0], index]),
                                setSelectedMenuState(menu.name))
                              : (handleMenuItemClick(index),
                                setActiveSubmenu(null),
                                setSelectedMenuState(menu.name),
                                isMobile && setIsOpenedSomeMenu(true),
                                setOpen([false, index]));
                          }}
                        >
                          <span className="flex gap-2 !text-xs  items-center">
                            {menu.icon}
                            {!menuMinimized && <span>{menu.name}</span>}
                          </span>
                          <span>
                            {[
                              "Cadastros Gerais",
                              "Metas",
                              "Kits",
                              "Transferências",
                            ].includes(menu.name) &&
                              (isOpen[1] === index && isOpen[0] ? (
                                <FaChevronUp />
                              ) : (
                                <FaChevronDown />
                              ))}
                          </span>
                        </div>

                        {menu?.subMenu && isOpen[1] === index && isOpen[0] && (
                          <div className="grid relative mb-2 w-full overflow-hidden">
                            <div className="absolute left-2 top-0 h-full w-[1px]  bg-black bg-opacity-25"></div>
                            {menu.subMenu.map((sub: any, index: any) => (
                              <div
                                onClick={() => {
                                  setActiveSubmenu(sub);
                                  {
                                    sub.name !== "Itens do Kit" &&
                                      isMobile &&
                                      setIsOpenedSomeMenu(true);
                                  }
                                  setTitlePage(sub.name);
                                  handleSubMenuItemClick(1, sub);
                                  sub.function && sub.function(true);
                                }}
                                key={index}
                                className={`flex text-[10px] items-center justify-between  ml-3 relative h-fit w-full px-2 py-2 rounded-md  ${
                                  activeSubmenu == sub
                                    ? "bg-stroke text-black-2 dark:text-white dark:bg-black"
                                    : "bg-transparent hover:bg-stroke hover:text-black-2"
                                }`}
                              >
                                <span>{sub.name}</span>
                                {sub.name === "Itens do Kit" && (
                                  <span className="rotate-90">
                                    <FaChevronUp />
                                  </span>
                                )}
                              </div>
                            ))}
                          </div>
                        )}
                      </span>
                    </li>
                  </div>
                </React.Fragment>
              ))
            ) : (
              <div
                className={`mt-9 max-sm:w-full submenu transition-opacity max-sm:grid  max-sm:text-black duration-700 ${activeSubmenuKitManual ? "active" : ""}`}
              >
                {subMenusItensKitmanual?.map((menu: any, index: number) => {
                  return (
                    <React.Fragment key={`${menu.name}_${index}`}>
                      <div
                        className={`cursor-pointer max-sm:w-full max-sm:font-medium font-bold  select-none items-center w-65 flex justify-center whitespace-nowrap `}
                      >
                        <li
                          className={`h-fit w-full transition-all ease-linear cursor-pointer`}
                        >
                          <div className="flex items-center"></div>
                          <span
                            className={`items-center gap-2 w-auto ${
                              [
                                "Cadastros Gerais",
                                "Kits",
                                "Transferências",
                              ].includes(menu.name)
                                ? "grid"
                                : "flex"
                            }`}
                          >
                            <div
                              className={`flex my-[2px]  !p-0 justify-between items-center h-fit w-full px-2  rounded-md text-sm overflow-hidden text-ellipsis transition-all ease-linear cursor-pointer ${
                                menu.selected
                                  ? "lg:bg-stroke text-black-2 dark:text-white dark:bg-black"
                                  : "bg-transparent hover:bg-stroke hover:text-black-2"
                              }`}
                            >
                              <div
                                onClick={() => {
                                  setActiveSubmenuKitManual(index);
                                  handleSubMenuItemClick(1, menu);
                                  setTitlePage(menu.name);
                                  isMobile && setIsOpenedSomeMenu(true);
                                }}
                                key={index}
                                className={`flex text-sm items-center   relative h-fit w-full px-2 py-2 rounded-md  ${
                                  activeSubmenuKitManual == index
                                    ? "lg:bg-stroke text-black-2 dark:text-white dark:bg-black"
                                    : "bg-transparent hover:bg-stroke hover:text-black-2"
                                }`}
                              >
                                <span>{menu.name}</span>
                              </div>
                            </div>
                          </span>
                        </li>
                      </div>
                    </React.Fragment>
                  );
                })}
              </div>
            )}
          </ul>
        )}
        {isMobile ? (
          isOpenedSomeMenu && (
            <section
              className={`overflow-x-auto md:py-5 px-2 md:p-2 bg-white dark:bg-boxdark-2 transition-all duration-300 w-full h-full`}
              // style={{ zoom: 1.12 }}
            >
              {SelectedComponent && (
                <>
                  {!menuOnView && (
                    <>
                      <h1 className="font-semibold text-lg ml-3 mt-9 m-3 text-black">
                        {titlePage}
                      </h1>
                      <SelectedComponent {...selectedProps} />
                    </>
                  )}

                  {menuOnView && (
                    <>
                      <div
                        className="flex items-center gap-3 mt-2"
                        onClick={() => {
                          if (menuStack.length <= 1) {
                            resetMenu();
                          } else {
                            goBack();
                          }
                        }}
                      >
                        <ArrowLeft size={18} /> Voltar
                      </div>
                      <AnimatePresence>
                        <motion.div
                          key={menuStack.length}
                          initial={{ opacity: 0, x: 100 }}
                          animate={{ opacity: 1, x: 0 }}
                          exit={{ opacity: 0, x: -100 }}
                          transition={{ duration: 0.3 }}
                          className="w-full h-full   rounded-md no-scrollbar overflow-auto"
                          style={{ height: "calc(100vh - 110px)" }}
                        >
                          {menuStack[menuStack.length - 1]}
                        </motion.div>
                      </AnimatePresence>
                    </>
                  )}
                </>
              )}
            </section>
          )
        ) : (
          <section
            className={`overflow-x-auto md:py-5 px-2 md:p-2 bg-white dark:bg-boxdark-2 transition-all duration-300 w-full h-full`}
            // style={{ zoom: 1.12 }}
          >
            {SelectedComponent && !menuOnView && (
              <>
                <h1 className="font-semibold text-lg ml-3 mt-9 m-3 text-black">
                  {titlePage}
                </h1>
                <SelectedComponent {...selectedProps} />
              </>
            )}
          </section>
        )}
      </div>
    </div>
  );
};

export default IndexCfg;