import React, { useState, useEffect,useRef } from 'react';
import { BrowserRouter, withRouter } from 'react-router-dom';
import Menu from './menu.jsx';
//import { obtenerMenu, CerrarSesion } from "../../ request/servicio.jsx"
import { baseUrl, SiteRutas } from '../../../request/RutasConfig.jsx';
import { Obtener_Menu_Request } from '../../../request/MenuRequest.jsx';
import { Notificacion } from '../../../components/Util/Notificacion/Notificacion.jsx';
import { useDispatch } from 'react-redux';
import Config from '../../../components/Util/constantes.js';
import { useHistory } from 'react-router-dom';
import { manageError } from '../../../components/Util/ManageError.js';
//import {baseUrl,RutasUrl} from  '../../../config/routes';
//import Session from '../../Tools/Session'
//class menuContenido extends React.Component {
function menuContenido(props) {
    // constructor(props) {
    //     super(props);
    //     this.state = {
    //         datosMenu: []
    //     };
    // }
    const mounted = useRef();
    const _modulo = Config.Modulo;
    const [datosMenu, setDatosMenu] = useState([]);
    let history = useHistory();

    const cargarDatos = async () => {
        // const _session = Crear_Session_Temporal();
        //    const session = new Session();
        //    //let Empresa = Session.get('Empresa');
        //    let Usuario = session.get('Usuario');
        //    let usuarioT =  Usuario == undefined ? null:  Usuario ==  null ? null : Usuario;
        //    if(usuarioT == null){
        //        this.props.history.replace(RutasUrl.Login);
        //        console.log('usuario nulo en menu');
        //    }
        //console.log(`Entra a cargar datos en menu`);
        let token = JSON.parse(sessionStorage.getItem('token'));
        const _listMenu = await cargaMenu(token, _modulo);

        setDatosMenu(_listMenu);
    }

    const Obtener_Menu = async (pToken, pModulo) => {
        const response = await Obtener_Menu_Request(pToken, pModulo);
        let listaMenu = [];
        //console.log('listEmpleadosTotal',listEmpleadosTotal);
        if (response.Exitoso) {
            listaMenu = response.Datos;
            if (listaMenu.length == 1) {
                if (listaMenu[0].ID == 0) {
                    history.push(SiteRutas.Login);
                    Notificacion.error(`Usuario no posee permisos en el menú`);
                    return [];
                }
            }
        } else {
            const _login = manageError(response,props,'Obtener_Menu_Request');
            history.push(SiteRutas.Login);
            return [];
        }
        return listaMenu;
    }




    const cargaMenu = async (pToken, pModulo) => {
        // try {

        let subMenu = [];
        let _MenuPar = props.lstMenu;// await Obtener_Menu(pToken, pModulo);
        if (_MenuPar.length > 0) {
            let _Menu = _MenuPar;//.data;
            let _MenuPadre = _Menu.filter(item => item.PadreID === 0);


            // siempre va tener el home
            //subMenu.push({ padre: { etiqueta: 'DashBoard', icono: "glyphicon glyphicon-dashboard", href: 'hola' }, hijos: [] });

            for (let j = 0, len = _MenuPadre.length; j < len; j++) {
                let _MenuHijo = _Menu.filter(item => item.PadreID === _MenuPadre[j].ID);
                //arma el menu principal
                let _hijo = [];
                //arma los menues hijos
                if (_MenuHijo.length > 0) {


                    _hijo = cargaSubMenu(_MenuHijo, _Menu, _MenuPadre[j].ID);
                }
                subMenu.push({ padre: { etiqueta: _MenuPadre[j].Nombre, icono: _MenuPadre[j].Imagen, href: baseUrl + (_MenuPadre[j].Url === '' ? _MenuPadre[j].Url : _MenuPadre[j].Url), raiz: _MenuPadre[j].TipoFormato, Id: _MenuPadre[j].TipoFormato, llave: _MenuPadre[j].ID, orden: _MenuPadre[j].Orden }, hijos: _hijo });
            }
        }
        return subMenu;
        // }
        // catch (err) {
        //     //this.onCerrarSesion();
        //     console.log('cargar menu', err);
        //     //this.props.history.replace(RutasUrl.Login);
        // }

    }

    const cargaSubMenu = (lstSubMenu, lstMenu, pRaiz) => {
        //try {
        let _submenu = [];
        let _hijo = [];

        for (let j = 0, len = lstSubMenu.length; j < len; j++) {

            let _MenuHijo = lstMenu.filter(item => item.PadreID === lstSubMenu[j].ID);
            //arma el submenu, tambien podria ser padre
            //_hijo.push({ etiqueta: lstSubMenu[j].Nombre, href: 'BASE ' + lstSubMenu[j].Url });

            //Tambien podria ser una submenu y a la vez padre
            if (_MenuHijo.length > 0) {
                _submenu = cargaSubMenu(_MenuHijo, lstMenu, pRaiz);

                _hijo.push({ padre: { etiqueta: lstSubMenu[j].Nombre, icono: lstSubMenu[j].Imagen, href: baseUrl + (lstSubMenu[j].Url === '' ? lstSubMenu[j].Url : lstSubMenu[j].Url), raiz: pRaiz, Id: lstSubMenu[j].TipoFormato, llave: lstSubMenu[j].ID, orden: lstSubMenu[j].Orden }, hijos: _submenu });
            }
            else {
                _hijo.push({ etiqueta: lstSubMenu[j].Nombre, href: baseUrl + lstSubMenu[j].Url, icono: lstSubMenu[j].Imagen, raiz: pRaiz, Id: lstSubMenu[j].TipoFormato, llave: lstSubMenu[j].ID, orden: lstSubMenu[j].Orden }); 
            }

        }

        return _hijo;
        // }
        // catch (err) {
        //     console.log(err);
        // }
    }

    const onCerrarSesion = async () => {
        const session = new Session();
        session.remove('Usuario');
        //session.remove('Usuario_id');
        //const respuesta = await CerrarSesion();

    }
    // componentDidCatch = () => {
    //     this.onCerrarSesion();
    //      this.props.history.replace(RutasUrl.Login);
    // }

    // useEffect(async () => {
    //     //console.log(' effet emp resaId', empresaId);
    //     await cargarDatos();
    //     ////globalParamCont.globalDispatch({ name: 'EmpresaId', value: empresaId.toString() }); //esta es la vara que se encicla
    // }, [])
    useEffect(() => {
        if (!mounted.current) {
        const carga =  async () =>{ await cargarDatos() 
        }
        carga()
         mounted.current = (props.lstMenu.length > 0) ? true : false;
    }
    }, [datosMenu])

    //render() {


    return (


        <div>
            <Menu datosMenu={datosMenu} onCerrarSesion={onCerrarSesion}/>
        </div>



    );
    //}

};
export default withRouter(menuContenido);