import React, { Fragment, useState, useEffect, useReducer, useContext, useRef } from 'react';
import { useHistory } from 'react-router-dom';
import { SiteRutas, ImagenesRutas, UtilitariosRutas } from '../request/RutasConfig.jsx';
import Header from '../components/Header/Header.jsx';
import Organigrama from '../components/Header/TreeOrganigrama/contenido.jsx';
import Menu from '../components/Header/menu/contenido.jsx'

import useInput from '../components/Util/Hooks/useInput.jsx';
//import { GlobalParamCont } from '../App.js';
import { useSessionStorage } from '../components/Util/Hooks/useSessionStorage.jsx';
import { useLocalStorage } from '../components/Util/Hooks/useLocalStorage.jsx';
import { Empresa_lista_Request, Organigrama_lista_Request } from '../request/SeguridadRequest.jsx';
import { Cantidad_DecimalesPocentaje_Request, Cantidad_DecimalesMoneda_Request, Cantidad_DecimalesCantidad_Request } from '../request/MantenimientosRequest.jsx';
import { Notificacion } from '../components/Util/Notificacion/Notificacion.jsx';
import { setDefaultLocale } from 'react-datepicker';
import { removejscssfile } from '../components/Util/Util.jsx'
//modasl
import ModalSpinner from '../components/UI/modalSpinner/modalSpinner.jsx';
export const GlobalParamCont = React.createContext();
import Session  from '../components/Util/session/index.jsx';


const initialState = {
    // UsuarioId: { value: '' },
    // Usuario: { value: '' },
    //tmpPass: { value: '' },
    // tmpUsuarioId: { value: '' },
    //tmpUser: { value: '' },
    EmpresaId: { value: 0 },
    //EmpresaNombre: { value: '' },
    //Telefono: { value: '' },
    //GenPaisModulo: { value: '' },
    Ubicacion: { value: '' }
}

const reducerGlobal = (state, action) => {
    if (action.name.trim().length > 0) {
        const name = action.name;
        const value = action.value;
        state = Object.assign({}, state, { [name]: { value: value } });
        return state;
    } else {
        return initialState;
    }
}

export default props => {
    const mounted = useRef();

    const [GlobalParam, dispatch] = useReducer(reducerGlobal, initialState);
    const [empresaId, setEmpresaId] = useState(0);
    //handlerEmpresas={this.handlerEmpresas}
    const [lstEmpresas, setLstEmpresas] = useState([]);
    const [nombreSistema, setNombreSistema] = useState('LDFAS Contabilidad');
    const [listaOrganigrama, setListaOrganigrama] = useState([{id:'',name:'',isOpen:true,valor:''}]);
    const globalParamCont = useContext(GlobalParamCont);
    const [token, setToken] = useSessionStorage('tokenCON', '');
    const [filtro, setFiltro] = useState('');
    const [displayOrg, setDisplayOrg] = useState('unset');
    const [classNameW, setClassNameW] = useState('wrapper');
    const [cargando, serCargando] = useState(true);
    const [empresa, setEmpresa] = useSessionStorage('empresaCON', '');
    const [telefono, setTelefono] = useSessionStorage('telefonoCON', '');
    const [empresaNombre, setEmpresaNombre] = useSessionStorage('empresaNombreCON', '');
    const [ubicacion, setUbicacion] = useLocalStorage('UbicacionCON', null);
    const [formato, setFormato] = useLocalStorage('FormatoCON', {});
    let history = useHistory();
    const [spinnerModal, setSpinnerModal] = useState(undefined);
    const [spinnerLabel, setSpinnerLabel] = useState('');
    const [spinnerTipo, setSpinnerTipo] = useState(1);
    const SessionStorage = new Session();
    //let nodosAbiertos= [];
    const [nodosAbiertos, setNodosAbiertos] = useState(["1"]);
    //const [nodosAbiertos, setNodosAbiertos] = useState([]);



    const cargarDatos = async () => {

        //const EmpresaId =globalParamCont.globalParam.EmpresaId.value;        
        let _listaOrganigrama = [];

        const response = await Empresa_lista_Request(token);

        const _Empresa = SessionStorage.get('empresaCON'); //empresa;
        const _Emp = SessionStorage.get('empresaCON');
        //const _EEPP = JSON.parse(sessionStorage.getItem('empresa'));
        if (response.Exitoso) {
            let empresaL = response.Datos[0];
            let _Emp = empresaL.Id;
            if ((_Empresa == null) || (_Empresa == undefined) || (_Empresa.length == 0)) {
                setEmpresaId(empresaL.Id);
                setEmpresa(empresaL.Id);
                setEmpresaNombre(empresaL.Nombre);
                setTelefono(empresaL.Telefono);
                dispatch({ name: 'EmpresaId', value: _Empresa });              
            } else {
                _Emp = _Empresa;
                setEmpresaId(_Empresa);
                dispatch({ name: 'EmpresaId', value: empresaL.Id });
            }
            //Notificacion.success("", "Se ha iniciado sesión en empresa lista Empresa.");
            setLstEmpresas(response.Datos); // this.Empresas_List(); 
            
            await cargaFormatos();
            
            setNombreSistema("LDFAS Contabilidad");
            //const responseOr = await cargaArbol(_Emp);
            const responseOrR = await cargaArbolR(_Emp);
            setListaOrganigrama(responseOrR); 
        }
        else {
            Notificacion.error(response.Mensaje);
            history.push(SiteRutas.Login);
        }

        //setListaOrganigrama(_listaOrganigrama);

    }

    const cargaFormatos = async () => {
        let pformatMonto = "0,0";// ajusta limite de decimales
        let pformatoPorc = "0,0";
        let pformatoCant = "0,0";
        const CantDecimales = await Cantidad_DecimalesMoneda_Request(token);
        const Decimales = Number(CantDecimales);
        const strDecimalesCant = await Cantidad_DecimalesCantidad_Request(token);
        const DecimalesCant = Number(strDecimalesCant);
        const PorcDecimales = await Cantidad_DecimalesPocentaje_Request(token);
        const DecimalesPorc = Number(PorcDecimales);

        for (var i = 0; i < Decimales; i++) {
            if (i == 0) {
                pformatMonto += ".";
            }

            pformatMonto += "0";
        }
        for (let j = 0; j < DecimalesPorc; j++) {
            if (j == 0) {
                pformatoPorc += ".";
            }

            pformatoPorc += "0";
        }

        for (let j = 0; j < DecimalesCant; j++) {
            if (j == 0) {
                pformatoCant += ".";
            }

            pformatoCant += "0";
        }
        let Formatos = {};
        Formatos.Decimales = {};
        Formatos.Decimales.CantDecimalesMon = Decimales;
        Formatos.Decimales.CantDecimalesCant = DecimalesCant;
        Formatos.Decimales.CantDecimalesPorc = DecimalesPorc;
        Formatos.Formato = {};
        Formatos.Formato.FormatoMon = pformatMonto;
        Formatos.Formato.FormatoCant = pformatoCant;
        Formatos.Formato.FormatoPorc = pformatoPorc;
        setFormato(Formatos);
    }

    const handlerEmpresas = async (e) => {
        await cambioEmpresas(e);
        history.push(SiteRutas.Asientos);
    }


    const cambioEmpresas = async (e) => {

        //const nameObj = e.target.name;
        const name = e.name;
        const _Empresa_Id = e.value;
        //globalParamCont.globalDispatch({ name: nameObj, value: _Empresa_Id })

        setEmpresaId(_Empresa_Id);

        const _lstOrganigrama = await cargaArbolR(_Empresa_Id); //this.Organigrama_List();  


        setListaOrganigrama(_lstOrganigrama);
        let _row = {};
        lstEmpresas.filter(item => item.Id == _Empresa_Id).map(function (item) {
            _row = item;
        });

        const empreNo = 'EmpresaId';
        const empreNomb = 'EmpresaNombre';
        const tel = 'Telefono';

        const empreNoValor = _Empresa_Id;
        const empreNombValor = _row.Nombre;
        const telValor = _row.Telefono;
        setEmpresa(_Empresa_Id);
        setEmpresaNombre(_row.Nombre);
        setTelefono(_row.Telefono);
        const _Empresa = empresa;
        const _Emp = SessionStorage.get('empresaCON');
        const _EEPP = JSON.parse(sessionStorage.getItem('empresaCON'));

        dispatch({ name: 'EmpresaId', value: _Empresa_Id });

        //globalParamCont.globalDispatch({ name: empreNomb, value: empreNombValor });
        //globalParamCont.globalDispatch({ name: tel, value: telValor });

        setClassNameW('wrapper');
        setDisplayOrg('unset');

        //localStorage.set('Ubicacion', null);


        //this.forceUpdate();

        //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

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



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

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


    }



    const cargaArbol = async (pEmpresa) => {
        //try {

        let responseOr = await Organigrama_lista_Request(token, pEmpresa.toString());// await organigrama_lista(pEmpresa); // this.Organigrama_List();
        if (responseOr.Exitoso) {
            //Notificacion.success("", "Se ha iniciado sesión en empresa lista organigrama.");
        }
        else {
            Notificacion.error(responseOr.Mensaje);
            history.push(SiteRutas.Login)
        }

        let _Menu = responseOr.Datos;//.data;
        let _arbolPadre = _Menu.filter(item => item.PadreID === 0);
        let subMenu = [];

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

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


                _hijo = cargaSubArbol(_arbolHijo, _Menu, _arbolPadre[j].ID);
            }
            //subMenu.push({ padre: { etiqueta: _arbolPadre[j].Nombre, icono: _arbolPadre[j].Imagen, href: _arbolPadre[j].Url === '' ? _arbolPadre[j].Url : 'BASE ' + _arbolPadre[j].Url, raiz: _arbolPadre[j].TipoFormato, Id: _arbolPadre[j].ID, valor: _arbolPadre[j].Composicion }, hijos: _hijo });
            subMenu.push({ padre: { etiqueta: _arbolPadre[j].Nombre, icono: _arbolPadre[j].Imagen, href: _arbolPadre[j].Url === '' ? _arbolPadre[j].Url : 'BASE ' + _arbolPadre[j].Url, raiz: _arbolPadre[j].TipoFormato, Id: _arbolPadre[j].ID, valor: _arbolPadre[j].Composicion }, hijos: _hijo });
        }
        return subMenu;
        //  }
        //  catch (err) {
        //     this.onCerrarSesion();
        //     this.props.history.push(`${RutasUrl.Login}`);

        //  }
    }

    const cargaSubArbol = (lstSubArbol, lstArbol, pRaiz) => {
        //try {
        let _submenu = [];
        let _hijo = [];

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

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

            //Tambien podria ser una submenu y a la vez padre
            if (_arbolHijo.length > 0) {
                // _submenu = cargaSubArbol(_arbolHijo, lstArbol, pRaiz);
                _submenu = cargaSubArbol(_arbolHijo, lstArbol, lstSubArbol[j].ID);

                _hijo.push({ padre: { etiqueta: lstSubArbol[j].Nombre, icono: lstSubArbol[j].Imagen, href: lstSubArbol[j].Url === '' ? lstSubArbol[j].Url : 'BASE ' + lstSubArbol[j].Url, raiz: pRaiz, Id: lstSubArbol[j].ID, valor: lstSubArbol[j].Composicion }, hijos: _submenu });
            }
            else {
                _hijo.push({ etiqueta: lstSubArbol[j].Nombre, href: 'BASE ' + lstSubArbol[j].Url, icono: lstSubArbol[j].Imagen, raiz: pRaiz, Id: lstSubArbol[j].ID, valor: lstSubArbol[j].Composicion });
            }

        }

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


    const cargaArbolR = async (pEmpresa) => {
        //try {

        let responseOr = await Organigrama_lista_Request(token, pEmpresa.toString());// await organigrama_lista(pEmpresa); // this.Organigrama_List();
        if (responseOr.Exitoso) {
            //Notificacion.success("", "Se ha iniciado sesión en empresa lista organigrama.");
        }
        else {
            Notificacion.error(responseOr.Mensaje);
            history.push(SiteRutas.Login)
        }

        let _Menu = responseOr.Datos;//.data;
        let _arbolPadre = _Menu.filter(item => item.PadreID === 0);
        let subMenu = [];

        // siempre va tener el home
        //subMenu.push({ padre: { etiqueta: 'DashBoard', icono: "glyphicon glyphicon-dashboard", href: 'hola' }, hijos: [] });
        let arrayAbierto = [];
        for (let j = 0, len = _arbolPadre.length; j < len; j++) {
            arrayAbierto.push(`${_arbolPadre[j].ID.toString()}`);
            //arrayAbierto.push(`${_arbolPadre[j].ID.toString()}`);
            let _arbolHijo = _Menu.filter(item => item.PadreID === _arbolPadre[j].ID);
            //arma el menu principal
            let _hijo = [];
            //arma los menues hijos
            if (_arbolHijo.length > 0) {


                _hijo = cargaSubArbolR(_arbolHijo, _Menu, _arbolPadre[j].ID, arrayAbierto, _arbolPadre[j].ID.toString());
            }
            subMenu.push({ id: _arbolPadre[j].ID, name: _arbolPadre[j].Nombre, isOpen: true, children: _hijo, valor: _arbolPadre[j].Composicion });
            //subMenu.push({ key: _arbolPadre[j].ID, label: _arbolPadre[j].Nombre, nodes: _hijo, valor: _arbolPadre[j].Composicion });
            //subMenu.push({ padre: { etiqueta: _arbolPadre[j].Nombre, icono: _arbolPadre[j].Imagen, href: _arbolPadre[j].Url === '' ? _arbolPadre[j].Url : 'BASE ' + _arbolPadre[j].Url, raiz: _arbolPadre[j].TipoFormato, Id: _arbolPadre[j].ID, valor: _arbolPadre[j].Composicion }, hijos: _hijo });
            //subMenu.push({ padre: { etiqueta: _arbolPadre[j].Nombre, icono: _arbolPadre[j].Imagen, href: _arbolPadre[j].Url === '' ? _arbolPadre[j].Url : 'BASE ' + _arbolPadre[j].Url, raiz: _arbolPadre[j].TipoFormato, Id: _arbolPadre[j].ID, valor: _arbolPadre[j].Composicion }, hijos: _hijo });
        }

        setNodosAbiertos(arrayAbierto);
        return subMenu;
        //  }
        //  catch (err) {
        //     this.onCerrarSesion();
        //     this.props.history.push(`${RutasUrl.Login}`);

        //  }
    }

    const cargaSubArbolR = (lstSubArbol, lstArbol, pRaiz, pAbierto, pRuta) => {
        //try {
        let _submenu = [];
        let _hijo = [];

        for (let j = 0, len = lstSubArbol.length; j < len; j++) {
            let _Ruta = `${lstSubArbol[j].ID.toString()}`
            //let _Ruta = `${pRuta}/${lstSubArbol[j].ID.toString()}`
            pAbierto.push(_Ruta);
            let _arbolHijo = lstArbol.filter(item => item.PadreID === lstSubArbol[j].ID);
            //arma el submenu, tambien podria ser padre
            //_hijo.push({ etiqueta: lstSubArbol[j].Nombre, href: 'BASE ' + lstSubArbol[j].Url });

            //Tambien podria ser una submenu y a la vez padre
            // if (_arbolHijo.length > 0) {
            // _submenu = cargaSubArbol(_arbolHijo, lstArbol, pRaiz);
            _submenu = cargaSubArbolR(_arbolHijo, lstArbol, lstSubArbol[j].ID,pAbierto, _Ruta);

            //     _hijo.push({ padre: { etiqueta: lstSubArbol[j].Nombre, icono: lstSubArbol[j].Imagen, href: lstSubArbol[j].Url === '' ? lstSubArbol[j].Url : 'BASE ' + lstSubArbol[j].Url, raiz: pRaiz, Id: lstSubArbol[j].ID, valor: lstSubArbol[j].Composicion }, hijos: _submenu });
            // }
            //  else {
                _hijo.push({ id: lstSubArbol[j].ID, name: lstSubArbol[j].Nombre, isOpen: true,children: _submenu, valor: lstSubArbol[j].Composicion });
            //_hijo.push({ key: lstSubArbol[j].ID, label: lstSubArbol[j].Nombre, nodes: _submenu, valor: lstSubArbol[j].Composicion });
            // _hijo.push({ etiqueta: lstSubArbol[j].Nombre, href: 'BASE ' + lstSubArbol[j].Url, icono: lstSubArbol[j].Imagen, raiz: pRaiz, Id: lstSubArbol[j].ID, valor: lstSubArbol[j].Composicion });
            //   }

        }

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


    const handlerArbol = (e) => {

        //alert(`${node} clicked`)
        //alert("Click a un nodo, valor " + e.target.attributes.value.value);
        setUbicacion(e.valor);
        //localStorage.setItem('Ubicacion',JSON.stringify(e.target.attributes.value.value));
        //history.replace(SiteRutas.Empleados);
        dispatch({ name: 'Ubicacion', value: e.valor });
    }

    const boton = () => {
        setUbicacion('555888');
        //console.log('click boton');
    }

    // 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(() => {
        document.body.style.background = '';
        if (!mounted.current) {
            const carga = async () => {
                await cargarDatos()
            }
            carga()
            mounted.current = true;
        }
    }, [lstEmpresas])


    return (
        <Fragment>
            <GlobalParamCont.Provider value={{ globalParam: GlobalParam, globalDispatch: dispatch }}>
                <Header
                    empresaId={empresaId}
                    handlerEmpresas={handlerEmpresas}
                    lstEmpresas={lstEmpresas}
                    nombreSistema={nombreSistema}
                />
                <Menu />
                <div className="main-content layout-boxed" id="back-top">
                        <div className="col-md-12" >
                            {props.children}
                        </div>
                </div>
            </GlobalParamCont.Provider>
            <ModalSpinner
                selectedModal={spinnerModal}
                contentLabel={'spinnerModalProgress'}
                label={spinnerLabel}
                tipoSpinner={spinnerTipo}
            />
        </Fragment>
    );
}