import React, { useEffect, useReducer, useMemo, useCallback } from "react"; // Definir tipos para el estado del menú de Eneon interface EneonMenuState { isDashboard: boolean; isComercializadora: boolean; isCliente: boolean; isGestionComercial: boolean; isSubContrato: boolean; isConfiguracion: boolean; isUsuarios: boolean; isSips: boolean; currentState: string; } // Estado inicial del menú const initialMenuState: EneonMenuState = { isDashboard: false, isComercializadora: false, isCliente: false, isGestionComercial: false, isSubContrato: false, isConfiguracion: false, isUsuarios: false, isSips: false, currentState: 'Dashboard', }; // Action types para el reducer type MenuAction = | { type: 'TOGGLE_MENU'; payload: { key: keyof EneonMenuState; value?: boolean } } | { type: 'SET_CURRENT_STATE'; payload: string } | { type: 'RESET_ALL_EXCEPT'; payload: string }; // Reducer para manejar el estado del menú de forma eficiente const menuReducer = (state: EneonMenuState, action: MenuAction): EneonMenuState => { switch (action.type) { case 'TOGGLE_MENU': return { ...state, [action.payload.key]: action.payload.value !== undefined ? action.payload.value : !state[action.payload.key] }; case 'SET_CURRENT_STATE': return { ...state, currentState: action.payload }; case 'RESET_ALL_EXCEPT': const resetState = { ...initialMenuState, currentState: action.payload }; // Mantener activo solo el estado actual const currentKey = `is${action.payload}` as keyof EneonMenuState; if (currentKey in resetState && typeof resetState[currentKey] === 'boolean') { (resetState as any)[currentKey] = true; } return resetState; default: return state; } }; const Navdata = () => { const [menuState, dispatch] = useReducer(menuReducer, initialMenuState); // Función updateIconSidebar memoizada const updateIconSidebar = useCallback((e: any) => { if (e && e.target && e.target.getAttribute("sub-items")) { const ul = document.getElementById("two-column-menu"); if (!ul) return; const iconItems = ul.querySelectorAll(".nav-icon.active"); const activeIconItems = Array.from(iconItems); activeIconItems.forEach((item: any) => { item.classList.remove("active"); const id = item.getAttribute("sub-items"); const getID = document.getElementById(id); if (getID?.parentElement) { getID.parentElement.classList.remove("show"); } }); } }, []); // Efecto optimizado para manejar el estado actual useEffect(() => { document.body.classList.remove('twocolumn-panel'); // Reset de todos los estados excepto el actual de forma eficiente if (menuState.currentState) { dispatch({ type: 'RESET_ALL_EXCEPT', payload: menuState.currentState }); } }, [menuState.currentState]); // Menú memoizado para evitar recreación innecesaria const menuItems = useMemo(() => { // Funciones locales dentro del useMemo para tener acceso al estado actual const handleMenuClick = (menuKey: keyof EneonMenuState, currentState: string) => (e: any) => { e.preventDefault(); dispatch({ type: 'TOGGLE_MENU', payload: { key: menuKey } }); dispatch({ type: 'SET_CURRENT_STATE', payload: currentState }); updateIconSidebar(e); }; const handleSubMenuClick = (menuKey: keyof EneonMenuState) => (e: any) => { e.preventDefault(); dispatch({ type: 'TOGGLE_MENU', payload: { key: menuKey } }); }; return [ { label: "Menu", isHeader: true, }, { id: "main", label: "Main", icon: "ri-home-4-line", link: "/main", }, { id: "dashboard", label: "Dashboards", icon: "ri-dashboard-2-line", link: "/#", stateVariables: menuState.isDashboard, click: handleMenuClick('isDashboard', 'Dashboard'), subItems: [ { id: "main", label: "Dashboards", link: "/dashboard", parentId: "dashboard", }, ], }, { id: "comercializadora", label: "Comercializadora", icon: "ri-apps-2-line", link: "/#", click: handleMenuClick('isComercializadora', 'Comercializadora'), stateVariables: menuState.isComercializadora, subItems: [ { id: "datosBasicos", label: "DatosBasicos", link: "/comercializadoras", parentId: "comercializadora", }, { id: "productos", label: "Productos", link: "/productos", parentId: "comercializadora", }, { id: "anexos", label: "Anexos", link: "/anexo-productos", parentId: "comercializadora", }, ], }, { id: "clientes", label: "Clientes", icon: "ri-account-circle-line", link: "/#", click: handleMenuClick('isCliente', 'Clientes'), stateVariables: menuState.isCliente, subItems: [ { id: "datosBasicosCliente", label: "DatosBasicosCliente", link: "/clientes", parentId: "clientes", badgeColor: "success", badgeName: "Nuevo" }, /*{ id: "cups", label: "CUPS", link: "/cups", parentId: "clientes", badgeColor: "success", badgeName: "Nuevo" },*/ { id: "puntoSuministro", label: "PuntoSuministro", link: "/puntoSuministro", parentId: "clientes", badgeColor: "success", badgeName: "Nuevo" }, { id: "contactos", label: "Contactos", link: "/contactos", parentId: "clientes", badgeColor: "success", badgeName: "Nuevo" }, ], }, { id: "gestionComercial", label: "GestionComercial", icon: "ri-pages-line", link: "/#", click: handleMenuClick('isGestionComercial', 'GestionComercial'), stateVariables: menuState.isGestionComercial, subItems: [ { id: "contratos", label: "Contratos", link: "/#", parentId: "gestionComercial", isChildItem: true, click: handleSubMenuClick('isSubContrato'), stateVariables: menuState.isSubContrato, childItems: [ { id: 1, label: "Sencillo - Dual", link: "/crear_contratos" }, { id: 2, label: "UniCliente - MultiPunto", link: "/crear_contratos_multi_punto" }, { id: 3, label: "MultiCliente - MultiPunto", link: "/crear_contratos_multi_cliente_multi_punto" }, { id: 4, label: "Consulta de Contratos", link: "/contratos" }, ] }, { id: "caes", label: "Caes", link: "/caes", parentId: "gestionComercial", }, { id: "activaciones", label: "Activaciones", link: "/#", parentId: "gestionComercial", }, { id: "renovacionMasiva", label: "RenovacionMasiva", link: "/#", parentId: "gestionComercial", }, { id: "consultarFechas", label: "ConsultarFechas", link: "/#", parentId: "gestionComercial", }, { id: "otrasGestiones", label: "OtrasGestiones", link: "/#", parentId: "gestionComercial", }, { id: "seguimientos", label: "Seguimientos", link: "/#", parentId: "gestionComercial", }, { id: "ruedaExcelWeb", label: "RuedaExcelWeb", link: "/#", parentId: "gestionComercial", }, { id: "listadoAutoConsumo", label: "ListadoAutoConsumo", link: "/#", parentId: "gestionComercial", }, { id: "excelDinamico", label: "ExcelDinamico", link: "/#", parentId: "gestionComercial", }, ], }, { id: "sips", label: "Gestión SIPS", icon: "ri-exchange-box-line", link: "/#", click: handleMenuClick('isSips', 'Sips'), stateVariables: menuState.isSips, subItems: [ { id: "consultarSips", label: "Consultar SIPS", link: "/sips", parentId: "sips", } ], }, { id: "configuracion", label: "Configuración", icon: "ri-settings-3-line", link: "/#", click: handleMenuClick('isConfiguracion', 'Configuracion'), stateVariables: menuState.isConfiguracion, subItems: [ { id: "cargaMasivaClientes", label: "Cargar Clientes", link: "/configuracion/carga-masiva-clientes", parentId: "configuracion", }, { id: "cargaMasivaCupsElectricos", label: "Cargar CUPS Eléctricos", link: "/configuracion/carga-masiva-cups-electricos", parentId: "configuracion", }, { id: "cargaMasivaCupsGas", label: "Cargar CUPS Gas", link: "/configuracion/carga-masiva-cups-gas", parentId: "configuracion", }, { id: "cargaMasivaPuntosSuministro", label: "Cargar Puntos de Suministro", link: "/configuracion/carga-masiva-puntos-suministro", parentId: "configuracion", }, { id: "cargaGlobalAudax", label: "Cargar Global Audax", link: "/configuracion/carga-masiva-global-audax", parentId: "configuracion", }, { id: "tarifasConfig", label: "Tarifas", link: "/tarifas", parentId: "configuracion", }, ], }, { id: "usuarios", label: "Usuarios", icon: "ri-user-line", link: "/users", click: handleMenuClick('isUsuarios', 'Usuarios'), stateVariables: menuState.isUsuarios, }, ]; }, [menuState, updateIconSidebar]); return { props: { children: menuItems } }; }; export default Navdata;