import React, { Fragment,useEffect, memo } from 'react';

//import LoaderHOC from '../../../HOC/LoaderHOC';
import {Link} from 'react-router-dom';


import {removejscssfile} from '../../Util/Util.jsx';
import {baseUrl, SiteRutas, UtilitariosRutas} from  '../../../request/RutasConfig.jsx';
import { faGraduationCap } from '@fortawesome/free-solid-svg-icons';
import TreeMenu  from 'react-simple-tree-menu';
import TreeView from './TreeViewMUI.jsx'

export function treeOrganigrama(props) {


const Empresa = ({ pDatos, onSelect,displayOrg }) => {

    let _Nodo = [];

    for (var j = 0, len = pDatos[0].hijos.length; j < len; j++) {
        /* if (j > 0 ) { */
        _Nodo.push(Areas(pDatos[0].hijos[j], j, onSelect))
        /*  } */
    }
    const stilo = {
        display:displayOrg
    }
    return (
        <aside className="side-bar" id='arbolESADO'  style={stilo}>
            <div className="empresa2">
                <p onClick={onSelect} value={pDatos[0].padre.valor} name="filtro" id="filtro" >{pDatos[0].padre.etiqueta}</p>                
            </div>
            <div className="treeview">
                <ul>
                    {_Nodo}
                </ul>
            </div>

        </aside>
    );

}


const ItemNodo = (pDatos, pIndex, onSelect) => {
    const url=  SiteRutas.Empleados; //baseUrl + 'home/empleados';
    if (!pDatos.padre) {
        return (<li key={pDatos.Id} value={pDatos.valor} name="filtro" id="filtro" onClick={onSelect}>
            {/*<a href="#" value={pDatos.valor} name="filtro" id="filtro" >{pDatos.etiqueta}</a>*/}
            <Link to= {url} value={pDatos.valor} name="filtro" id="filtro">{pDatos.etiqueta}</Link> 
        </li>);
    }
    else {
        return (<li key={pDatos.padre.Id} value={pDatos.padre.valor} name="filtro" id="filtro" onClick={onSelect} >
            {/*<a href="#" value={pDatos.padre.valor} name="filtro" id="filtro">{pDatos.padre.etiqueta} </a> */}
            <Link to={url} value={pDatos.padre.valor} name="filtro" id="filtro">{pDatos.padre.etiqueta}</Link> 
        </li>
        );
    }

    // _sub.push(ItemInter(pDatos[j], j, pconsMenu, pconsMenuInter)) 
}

const ItemPadre = (pDatos, pIndex, onSelect) => {
    const url=  SiteRutas.Empleados;
    if (!pDatos.padre) {
        return (<li key={pDatos.Id} value={pDatos.valor} name="filtro" id="filtro" onClick={onSelect}>
                {/*<a href="#" value={pDatos.valor} name="filtro" id="filtro">{pDatos.etiqueta}</a>*/}
                <Link to= {url} value={pDatos.valor} name="filtro" id="filtro">{pDatos.etiqueta}</Link> 
                </li>  
        );
    }
    else {
        return (<li key={pDatos.padre.Id} value={pDatos.padre.valor} name="filtro" id="filtro" onClick={onSelect} >
                {/*<a href= {SiteRutas.Empleados} value={pDatos.padre.valor} name="filtro" id="filtro">{pDatos.padre.etiqueta} </a>*/}
                <Link to={url} value={pDatos.padre.valor} name="filtro" id="filtro">{pDatos.padre.etiqueta}</Link> 
                </li>

        );
    }

    // _sub.push(ItemInter(pDatos[j], j, pconsMenu, pconsMenuInter)) 
}

    const Areas = (pDatos, pIndex, onSelect) => {

        let _Nodo = [];
        let _Padre;

        if (!!pDatos.padre) {
            _Padre = ItemPadre(pDatos.padre, pIndex, onSelect);
            for (var j = 0, len = pDatos.hijos.length; j < len; j++) {
                _Nodo.push(Departamento(pDatos.hijos[j], j, onSelect));
            }
        }
        else {
            _Nodo.push(ItemNodo(pDatos, pIndex, onSelect))
        }

        if (_Nodo.length > 0) {
            if (!!pDatos.padre) {
                return (<li key={pDatos.padre.Id} value={pDatos.padre.valor} name="filtro" id="filtro" onClick={onSelect}>
                    {_Padre}
                    <ul>
                        {_Nodo}
                    </ul>
                </li>);
            } else {
                return (
                    <Fragment>
                    { _Nodo }
                    </Fragment>
                );
            }
        }
        else {
            return (<li key={pIndex}>
                {_Padre}
            </li>);
        }


    }

const Departamento = (pDatos, pIndex, onSelect) => {

    let _Nodo = [];
    let _Padre;

    if (!!pDatos.padre) {
        _Padre = ItemPadre(pDatos.padre, pIndex, onSelect);
        for (var j = 0, len = pDatos.hijos.length; j < len; j++) {
            _Nodo.push(Seccion(pDatos.hijos[j], j, onSelect));
        }
    }
    else {
        _Nodo.push(ItemNodo(pDatos, pIndex, onSelect))
    }


    if (!!_Padre) {
        return (<li key={pDatos.padre.Id} value={pDatos.padre.valor} name="filtro" id="filtro" onClick={onSelect}>
            {_Padre}
            <ul>
                {_Nodo}
            </ul>
        </li>);
    }
    else {
        return (<li key={pIndex}>
            {_Nodo}
        </li>);
    }
}

    const Seccion = (pDatos, pIndex, onSelect) => {

        let _Nodo = [];
        let _Padre;

        if (!!pDatos.padre) {
            _Padre = ItemPadre(pDatos.padre, pIndex, onSelect);
            for (var j = 0, len = pDatos.hijos.length; j < len; j++) {
                _Nodo.push(Oficina(pDatos.hijos[j], j, onSelect));
            }
        }
        else {
            _Nodo.push(ItemNodo(pDatos, pIndex, onSelect))
        }


        if (_Nodo.length > 0) {
            if (!!pDatos.padre) {
                return (<li key={pDatos.padre.Id} value={pDatos.padre.valor} name="filtro" id="filtro" onClick={onSelect}>
                    {_Padre}
                    <ul>
                        {_Nodo}
                    </ul>
                </li>);
            } else {
                return (
                    <Fragment>
                        { _Nodo}
                    </Fragment>
                );
            }
        }
        else {
            return (<li key={pIndex}>
                {_Padre}
            </li>);
        }
    }
const Oficina = (pDatos, pIndex, onSelect) => {

    let _Nodo = [];
    let _Padre;

    if (!!pDatos.padre) {
        _Padre = ItemPadre(pDatos.padre, pIndex, onSelect);
        for (var j = 0, len = pDatos.hijos.length; j < len; j++) {
            _Nodo.push(ItemNodo(pDatos, pIndex, onSelect))
        }
    }
    else {
        _Nodo.push(ItemNodo(pDatos, pIndex, onSelect))
    }

    if (!!_Padre) {
        return (<li key={pDatos.padre.Id} value={pDatos.padre.valor} name="filtro" id="filtro">
            {_Padre}
            <ul>
                {_Nodo}
            </ul>
        </li>);
    }
    else {
        return (<ul key={pIndex}>
            {_Nodo}
        </ul>);
    }
}
const EmpresaHtml = () => {
    if (props.lstOrganigrama.length > 0) {
         return( <Empresa pDatos={props.lstOrganigrama}
            onSelect={props.handlerArbol}
            displayOrg={props.displayOrg}
        />  ) 
    }
        else { return (<div> </div>)
    }
}

const scriptJavaActualizar =()=> {

    // //Organigrama script

    //removejscssfile("MultiNestedList.js", "js") //remove all occurences of "somescript.js" on page
    //removejscssfile("perfect-scrollbar.js", "js") //remove all occurences of "somescript.js" on page

    //         //Se metido el script por que cuando es asincronico la consulta a base de datos y el llenedo se hace despues de montado el react, la funcionalidad del java script saparece

    //  const scriptTree = document.createElement("script");
    //  scriptTree.src=   UtilitariosRutas.perfectScrollbar; //baseUrl +"Public/lib/perfect-scrollbar/perfect-scrollbar.js";
    //  scriptTree.async =false;
    //  document.body.appendChild(scriptTree);


     
      //.2const script = document.createElement("script");
      //script.src =   UtilitariosRutas.MultiNestedList; //baseUrl + "Public/lib/utilitarios/MultiNestedList.js";
     // script.async = false;      
      //document.body.appendChild(script);

      
//TAPA* 
    // const s = document.createElement("script");
    // s.type = "text/javascript";
    // s.async = false;
    // s.innerHTML = "new PerfectScrollbar('.side-bar')";
    // document.body.appendChild(s);  
    

}

useEffect(scriptJavaActualizar,[]);
const stilo = {
    display:props.displayOrg
}
return (
    <Fragment>
       {/* <EmpresaHtml/>*/}
       <aside className="side-bar" id='arbolESADO' style={stilo}>                
       {/*<TreeMenu
           cacheSearch
           data={props.lstOrganigrama}
           debounceTime={125}
           disableKeyboard={false}
           hasSearch
           //onClickItem={function noRefCheck() { }} 
           onClickItem={props.handlerArbol}
           resetOpenNodesOnDataUpdate={true}
           initialOpenNodes ={props.NodosAbiertos}
           resetOpenNodesOnDataUpdate={true}
           //resetOpenNodes={props.NodosAbiertos}
       />*/}
       <TreeView
            data ={props.lstOrganigrama}
            defaultExpanded ={props.NodosAbiertos}
            handlerArbol={props.handlerArbol}
       />
       </aside>       
    </Fragment>
// <p>Load Time: {this.props.loadTime} seconds </p>
)
};
export default memo(treeOrganigrama);