import React,{memo} from 'react';
import { Link } from 'react-router-dom';
import MenuPadre from './menuPadre.jsx';
import MenuHijos from './menuHijos.jsx';
import { id } from 'date-fns/esm/locale';
import { CodeSharp } from '@material-ui/icons';

//class MenuObjeto extends React.Component {
function MenuObjeto (props){    

    //render() {
        const { datosMenuObjeto, consMenu, consMenuInter } = props;
        var hrefJs = "";
        if (datosMenuObjeto.padre.href !== "") {
            hrefJs = datosMenuObjeto.padre.href;
        }

        if (datosMenuObjeto.hijos.length === 0) {
            return (
                <li className="clearfix" key={datosMenuObjeto.padre.llave + 'p'} >
                   {/*} <Link to={hrefJs}>
                        <i className={datosMenuObjeto.padre.icono}></i>
                        <span>{datosMenuObjeto.padre.etiqueta}</span>
                    </Link>*/}
                    <a href={hrefJs}>
                        <i className={datosMenuObjeto.padre.icono}></i>
                        <span>{datosMenuObjeto.padre.etiqueta}</span>                    
                    </a>
                </li>
            );
        }
        else {
            if (datosMenuObjeto.padre.raiz === 6) {
                return (
                    <li className="wsshopmyaccount clearfix" key={datosMenuObjeto.padre.llave + 'p'} 
                        onMouseOver={()=>{document.getElementById(datosMenuObjeto.padre.raiz ).style.setProperty("display"," block")} }   
                    >
                        <MenuPadre key={datosMenuObjeto.padre.llave + 'pp'} datosMenuPadre={datosMenuObjeto.padre} consMenu={consMenu} />
                        <MenuHijos key={datosMenuObjeto.padre.llave + 'ph'} datosMenuHijos={datosMenuObjeto.hijos} consMenu={consMenu} consMenuInter={consMenuInter} onCerrarSesion={props.onCerrarSesion} />
                    </li>
                );
            }
            else {               
                return (
                    <li key={datosMenuObjeto.padre.llave + 'p'}                         
                        onMouseOver={()=>{document.getElementById(datosMenuObjeto.padre.raiz ).style.setProperty("display"," block")} }  > 
                        <MenuPadre key={datosMenuObjeto.padre.llave + 'pp'} datosMenuPadre={datosMenuObjeto.padre} consMenu={consMenu} />
                        <MenuHijos key={datosMenuObjeto.padre.llave + 'ph'} datosMenuHijos={datosMenuObjeto.hijos}  consMenu={consMenu} consMenuInter={consMenuInter} onCerrarSesion={props.onCerrarSesion} />
                    </li>
                );
            }
        }
    //}
};

export default  memo(MenuObjeto);