import React ,{memo}from 'react';
import { Link } from 'react-router-dom';
//librerias
import { baseUrl, ImagenesRutas, SiteRutas } from '../../../request/RutasConfig.jsx';
//Menu de Parametros

function MenuHijos(props) { 

const ItemParam = (pDatos, pIndex) => {
    return (<li key={pDatos.llave}>
        {/*<Link to={pDatos.href}> {pDatos.etiqueta}</Link>*/}
        <a href={pDatos.href}>{pDatos.etiqueta}</a>
    </li>
    );
}



const listaParam = (pDatos, pCont) => {
    return (<div key={pCont} className="col-md-4">
        <ul key={pCont} className="wstliststy01" >
            {pDatos}
        </ul>

    </div>
    );
}
const menuParametros = (pDatos, pCont) => {
    let _menu = [];
    let _sub = [];
    let _cont = 0;
    let Cont = 0;
    for (let j = 0, len = pDatos.length; j < len; j++) {
        _cont++;
        Cont++;
        if (_cont < pCont) {
            _sub.push(ItemParam(pDatos[j], j))
            if (j === (len - 1)) {
                _menu.push(listaParam(_sub, Cont));

            }
        }
        else {
            if (_cont === pCont) {
                _sub.push(ItemParam(pDatos[j]))
            }
            _menu.push(listaParam(_sub, Cont));
            _sub = [];
            _cont = 0;
        }

    }
    return _menu
}

//Menu para Procesos
const ItemProceso = (pDatos, pIndex) => {
    return (<li key={pDatos.llave}>
        {/*<Link to={pDatos.href}><img src={ baseUrl + pDatos.icono} />{pDatos.etiqueta}</Link>
    <i className={pDatos.padre.icono}></i>*/}
        <a href={pDatos.href}><i className={pDatos.icono}></i>{pDatos.etiqueta}</a>
    </li>

    );
}

const menuProcesos = (pDatos) => {
    let _menu = [];
    for (var j = 0, len = pDatos.length; j < len; j++) {
        _menu.push(ItemProceso(pDatos[j], j))
    }

    return _menu;
}


//Menu Interfaces
const ItemInterSub = (pDatos, tipoFormato) => {
    let _item;
    let _sub = [];
    switch (tipoFormato) {
        case 1:
            _sub = [];
            for (let j = 0; j < pDatos.length; j++) {
                _item = <li key={pDatos[j].llave}>
                    {/*<Link to={pDatos[j].href}><img src={baseUrl + pDatos[j].icono} />{pDatos[j].etiqueta}</Link>*/}
                    <a href={pDatos[j].href}><img src={baseUrl + pDatos[j].icono} />{pDatos[j].etiqueta}</a>
                </li>;
                _sub.push(_item);
            }
            _item = "";
            break;
        case 2:
            _sub = [];
            for (let j = 0; j < pDatos.length; j++) {
                _item = <li key={pDatos[j].llave}>
            {/*<Link to={pDatos[j].href}>{pDatos[j].etiqueta}</Link>*/}
                <a href={pDatos[j].href}>{pDatos[j].etiqueta}</a>
                </li>;
                _sub.push(_item);
            }
            _item = "";
            break;
        default:
            _sub = [];
            for (let j = 0; j < pDatos.length; j++) {
                _item = <li key={pDatos[j].llave}>
                    {/*<Link to={pDatos[j].href}>{pDatos[j].etiqueta}</Link>*/}
                    <a href={pDatos[j].href}>{pDatos[j].etiqueta}</a>
                </li>;
                _sub.push(_item);
            }
            _item = "";
            break;

    }
    return (
        _sub
    );
}
const ItemInter = (pDatos, pIndex, pconsMenu, pconsMenuInter) => {

    let _items;
    let _num = parseInt(pDatos.padre.raiz.toString() + pDatos.padre.Id.toString(), 10);
    switch (_num) {
        case (parseInt(pconsMenu.parametros.toString() + pconsMenuInter.pagoBancos.toString(), 10)):
            //Bancos Pagos
            _items = <li key={pDatos.padre.llave}>
                <a href="#"><i className={pDatos.padre.icono}></i>{pDatos.padre.etiqueta}</a>
                <div key={pDatos.padre.llave} className="wstitemright clearfix">
                    <div className="row">
                        <div className="col-md-12">
                            <ul key={pDatos.padre.llave + 'pg'} className="bancos">
                                {ItemInterSub(pDatos.hijos, 1)}
                            </ul>
                        </div>
                    </div>
                </div>

            </li>
            break;
        case (parseInt(pconsMenu.parametros.toString() + pconsMenuInter.interfazBancos.toString(), 10)):
            //Bancos Interfaz
            _items = <li key={pDatos.padre.llave}>
                <a ><i className={pDatos.padre.icono}></i>{pDatos.padre.etiqueta}</a>
                <div key={pDatos.padre.llave} className="wstitemright clearfix ld-bancos-img">
                    <div className="row">
                        <div className="col-md-12">
                            <ul key={pDatos.padre.llave + 'b'} className="parametros-contables">
                                {ItemInterSub(pDatos.hijos, 2)}
                            </ul>
                        </div>
                    </div>
                </div>

            </li>
            break;
        case (parseInt(pconsMenu.parametros.toString() + pconsMenuInter.interfzaTerceros.toString(), 10)):
            //Interfaz terceros
            _items = <li key={pDatos.padre.llave}>
                <a href="#"><i className={pDatos.padre.icono}></i>{pDatos.padre.etiqueta}</a>
                <div key={pDatos.padre.llave} className="wstitemright clearfix">
                    <div className="row">
                        <div className="col-md-12">
                            <ul key={pDatos.padre.llave + 't'} className="terceros">
                                {ItemInterSub(pDatos.hijos, 1)}
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            break;
        case (parseInt(pconsMenu.parametros.toString() + pconsMenuInter.correos.toString(), 10)):
            //Correos
            _items = <li key={pDatos.padre.llave}>
                <a href="#"><i className={pDatos.padre.icono}></i>{pDatos.padre.etiqueta}</a>
                <div key={pDatos.padre.llave} className="wstitemright clearfix colilla-img">
                    <div className="row">
                        <div className="col-md-12">
                            <ul key={pDatos.padre.llave + 'em'} className="parametros-contables">
                                {ItemInterSub(pDatos.hijos, 2)}
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            break;
    }
    return _items;
}



const listaInter = (pDatos) => {
    let _cont = 1500;
    return (<ul key={_cont} className="wstabitem clearfix">
        {pDatos}
    </ul>


    );
}
const menuInterfaces = (pDatos, pconsMenu, pconsMenuInter) => {
    let _menu = [];
    let _sub = [];
    for (let j = 0; j < pDatos.length; j++) {
        if (!!pDatos[j].padre) {
             _sub.push(ItemInter(pDatos[j], j, pconsMenu, pconsMenuInter)) 
        }
    }
    _menu.push(listaInter(_sub, true));
    _sub = [];

    return _menu
}


//Menu Reportes
const ItemRep = (pDatos, pPadre, pIndex) => {
    if (pPadre === true) {
        return (<li key={pDatos.llave} className="wstheading">
            {pDatos.etiqueta} 
        </li>);
    }
    else {
        return (<li key={pDatos.llave}  >
            {/*<Link to={pDatos.href}>{pDatos.etiqueta}</Link>*/}
            <a href={pDatos.href}>{pDatos.etiqueta}</a>
        </li>);
    }


}



const listaRep = (pDatos, pSimple, pCont) => {
    if (pSimple === true) {
        return (
            <ul key={pCont} className="reportes-list1"  >
                {pDatos}
            </ul>

        );
    }
    else {
        return (
            <ul key={pCont} className="wstliststy02" >
                {pDatos}
            </ul>

        );
    }
}
const menuReportes = (pDatos) => {
    let _menu = [];
    let _sub = [];
    let _hijo = [];
    let _cont = 0;
   // for (let j = 0; j < pDatos.length; j++) {
   //     if (!pDatos[j].padre) {
  //          _sub.push(ItemRep(pDatos[j], false, j))
  //      }
   // }

    let _cont1 = 0;
    let Cont1 = 0;

    for (let j = 0, len = pDatos.length; j < len; j++) {
        _cont1++;
        Cont1++;
        if (_cont1 < 5) {
            _sub.push(ItemRep(pDatos[j], false, j))
            if (j === (len - 1)) {
                _menu.push(listaRep(_sub, true, Cont1));

            }
        }
        else {
            if (_cont1 === 5) {
                _sub.push(ItemRep(pDatos[j], false, j))
            }
            _menu.push(listaRep(_sub, true, Cont1));
            _sub = [];
            _cont1 = 0;
        }

    }






   // _menu.push(listaRep(_sub, true, _cont));
    _sub = [];

    for (let j = 0; j < pDatos.length; j++) {
        if (!!pDatos[j].padre) {
            _sub.push(ItemRep(pDatos[j].padre, true, j))
            _hijo = pDatos[j].hijos;
            for (let i = 0; i < _hijo.length; i++) {
                _sub.push(ItemRep(_hijo[i], false, (i * 10)))
            }
            _cont = _cont + 1;
            _menu.push(listaRep(_sub, false, _cont));
            _sub = [];
        }
    }
    return _menu
}


//Menu para administrativo
const ItemAdm = (pDatos, { pIndex }, onCerrarSesion) => {
    let item = '';

    if (pDatos.etiqueta == 'Salir') {
        item = <li key={pDatos.llave} >
    {/*<Link to={ SiteRutas.Login} onClick={onCerrarSesion}><i className={pDatos.icono}></i>{pDatos.etiqueta}</Link>*/}
            <a href={SiteRutas.Login} onClick={onCerrarSesion}><i className={pDatos.icono}></i>{pDatos.etiqueta}</a>

        </li>

    } else {
        item = <li key={pDatos.llave} >
            {/*<Link to={pDatos.href}  ><i className={pDatos.icono}></i>{pDatos.etiqueta}</Link>*/}
            <a href={pDatos.href} ><i className={pDatos.icono}></i>{pDatos.etiqueta}</a>
            {/* <i className="fa fa-university"></i> */}
        </li>
    }
    //return ( <li key ={pDatos.llave} >
    //    <Link to={pDatos.href}><i className={pDatos.icono}></i>{pDatos.etiqueta}</Link> 
    //    {/* <i className="fa fa-university"></i> */}
    //</li>            
    //);    
    return item;
}

const menuAdm = (pDatos, onCerrarSesion) => {
    let _menu = [];
    for (var j = 0, len = pDatos.length; j < len; j++) {
        _menu.push(ItemAdm(pDatos[j], j, onCerrarSesion))
    }

    return _menu;
}

const Hijos = ({ pDatos, pconsMenu, pconsMenuInter, onCerrarSesion }) => {

    let _items;
    let _raiz = 0;
    if (!pDatos[0].padre) {
        _raiz = pDatos[0].raiz;
    }
    else {
        _raiz = pDatos[0].padre.raiz;
    }
    switch (_raiz) {
        case pconsMenu.empleado:
            // const url = baseUrl + pDatos[0].href;//'home/empleados';
            // _items = <li key={pDatos[0].llave + 'p'}>
            //     {/*<Link to={{ url }}>{pDatos[0].etiqueta}</Link>*/}
            //     <a href={{url}} >{pDatos[0].etiqueta}</a>
            // </li>;
            _items = <div className="megamenu clearfix" style={{height: '265px'}}>
                <div className="col-md-6">
                    <div id={pconsMenu.parametros} className="row" 
                        onClick={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
                        onMouseLeave={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
                        onMouseOver={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display"," block")} }
                    >
                        {menuParametros(pDatos,5)}
                    </div>
                </div>
            </div>;            
            break;
        case pconsMenu.parametros:
            
            // _items = <div className="wsshoptabing wtsdepartmentmenu clearfix">
            //     <div id={pconsMenu.parametros} className="wsshopwp clearfix"
            //         onClick={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
            //         onMouseLeave={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
            //         onMouseOver={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display"," block")} }
            //     >
            //         {menuInterfaces(pDatos, pconsMenu, pconsMenuInter)}
            //     </div>
            // </div>

            _items = <div className="megamenu clearfix"  style={{height: '250px'}}>
            <div className="col-md-6">
                    <div id={pconsMenu.parametros} className="row" 
                        onClick={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
                        onMouseLeave={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
                        onMouseOver={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display"," block")} }
                    >
                        {menuParametros(pDatos,6)}
                    </div>
                </div>
            </div>;

            break;

            /*_items = <div className="megamenu clearfix">
                <div className="parametros-img">
                    <div id={pconsMenu.parametros} className="row" 
                        onClick={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
                        onMouseLeave={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
                        onMouseOver={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display"," block")} }
                    >
                        {menuParametros(pDatos)}
                    </div>
                </div>
            </div>;
            break;*/
        case pconsMenu.procesos:
            // _items = <div id={pconsMenu.procesos} className="megamenu clearfix"
            //             onClick={()=>{document.getElementById(pconsMenu.procesos).style.setProperty("display","none")} } 
            //             onMouseLeave={()=>{document.getElementById(pconsMenu.procesos).style.setProperty("display","none")} } 
            //             onMouseOver={()=>{document.getElementById(pconsMenu.procesos).style.setProperty("display"," block")} }
            //         >
            //     <ul className="procesos">
            //         {menuProcesos(pDatos)}
            //     </ul>
            // </div>
            _items = <div className="megamenu clearfix" style={{height: '250px'}}>
            <div className="col-md-6">
                    <div id={pconsMenu.parametros} className="row" 
                        onClick={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
                        onMouseLeave={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
                        onMouseOver={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display"," block")} }
                    >
                        {menuParametros(pDatos,6)}
                    </div>
                </div>
            </div>;            
            break;
        case pconsMenu.genInterfaces:
        //     _items = <div className="megamenu clearfix">
        //     <div className="parametros-img">
        //         <div id={pconsMenu.genInterfaces} className="row" 
        //             onClick={()=>{document.getElementById(pconsMenu.genInterfaces).style.setProperty("display","none")} } 
        //             onMouseLeave={()=>{document.getElementById(pconsMenu.genInterfaces).style.setProperty("display","none")} } 
        //             onMouseOver={()=>{document.getElementById(pconsMenu.genInterfaces).style.setProperty("display"," block")} }
        //         >
        //             {menuParametros(pDatos)}
        //         </div>
        //     </div>
        // </div>;
        _items = <div className="megamenu clearfix">
        <div className="col-md-6">
            <div id={pconsMenu.parametros} className="row" 
                onClick={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
                onMouseLeave={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display","none")} } 
                onMouseOver={()=>{document.getElementById(pconsMenu.parametros).style.setProperty("display"," block")} }
            >
                {menuParametros(pDatos,6)}
            </div>
        </div>
    </div>;        
        break;            
           /* _items = <div className="wsshoptabing wtsdepartmentmenu clearfix">
                <div id={pconsMenu.genInterfaces} className="wsshopwp clearfix"
                    onClick={()=>{document.getElementById(pconsMenu.genInterfaces).style.setProperty("display","none")} } 
                    onMouseLeave={()=>{document.getElementById(pconsMenu.genInterfaces).style.setProperty("display","none")} } 
                    onMouseOver={()=>{document.getElementById(pconsMenu.genInterfaces).style.setProperty("display"," block")} }
                >
                    {menuInterfaces(pDatos, pconsMenu, pconsMenuInter)}
                </div>
            </div>
            break;*/
        case pconsMenu.reportes:
            _items = <div id={pconsMenu.reportes} 
                        className="megamenu clearfix" 
                        onClick={()=>{document.getElementById(pconsMenu.reportes).style.setProperty("display","none")} } 
                        onMouseLeave={()=>{document.getElementById(pconsMenu.reportes).style.setProperty("display","none")} } 
                        onMouseOver={()=>{document.getElementById(pconsMenu.reportes).style.setProperty("display"," block")}}
                    >
                        {menuReportes(pDatos)}
                    </div>
            break;

        case pconsMenu.administrativo:
            _items = <ul id={pconsMenu.administrativo}  className="wsmenu-submenu account"
                                    onClick={()=>{document.getElementById(pconsMenu.administrativo).style.setProperty("display","none")} } 
                                    onMouseLeave={()=>{document.getElementById(pconsMenu.administrativo).style.setProperty("display","none")} } 
                                    onMouseOver={()=>{document.getElementById(pconsMenu.administrativo).style.setProperty("display"," block")}}            
                                >
                            {menuAdm(pDatos, onCerrarSesion)}
                        </ul>
                    

            break;
        default:
            _items = <li key={pDatos[0].llave}>
                {/*<Link to={pDatos[0].href}> {pDatos[0].etiqueta}</Link>*/}
                <a href={pDatos[0].href} >{pDatos[0].etiqueta}</a>
            </li>
            break;
    }
    return _items;
}

    // class MenuHijos extends React.Component {

    //     constructor(props) {
    //         super(props);
    //         this.state = {
    //             datosMenu: []
    //         };
    //     }
const onSelect=()=>{
    console.log( 'se clickio'); 
}

    //render() {
        const { datosMenuHijos, consMenu, consMenuInter } = props;
        return (
            <Hijos pDatos={datosMenuHijos} pconsMenu={consMenu} pconsMenuInter={consMenuInter} onCerrarSesion={props.onCerrarSesion}  />
        )

    //}
};
export default memo(MenuHijos);
//export default MenuHijos;