import React, { Fragment, memo, useEffect, useRef, useState } from 'react';
import { useHistory, withRouter } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faReply, faSave } from '@fortawesome/free-solid-svg-icons';
import InsertarMasivoInt from './insertarMasivoInt.jsx';
import { SiteRutas } from '../../../request/RutasConfig.jsx';
import { datosArbolCheck,validaCorreo, validaTelefono, itemSelect } from '../../../components/Util/Util.jsx';
//Invocaciones datos
import { SubTiposCuentas_Listar_Request } from "../../../request/MantenimientosRequest.jsx"
import { Catalogo_Lista_Request, Catalogo_Guardar_Masivo_Request } from "../../../request/ServicioRequest.jsx";
import { Empresa_lista_Request } from "../../../request/SeguridadRequest.jsx";
import { useSessionStorage } from '../../../components/Util/Hooks/useSessionStorage.jsx';
//utilitarios
import { Notificacion } from '../../../components/Util/Notificacion/Notificacion.jsx';
import ModalSpinner from '../../../components/UI/modalSpinner/modalSpinner.jsx';

import ModalErrores from '../../../components/UI/modalErrores/modalErrores.jsx';

//Seguridad
import Session from '../../../components/Util/session/index.jsx';
import Config from '../../../components/Util/constantes.js';
import { Obtener_MenuOpciones_Lista_Request, Obtener_MenuNombre_Request } from "../../../request/MenuRequest.jsx"
import ModalSeguridad from "../../Seguridad/ModalSeguridad.jsx";
import optSeg from '../../../components/Util/seg-menu-opciones.js';

import Swal from 'sweetalert2';


const insertarMasivo = (props) => {
    let historyMenu = useHistory();
    const [token, setToken] = useSessionStorage('tokenCON', '');
    const [empresa, setEmpresa] = useSessionStorage('empresaCON', 0);
    const [empresaNombreCON, setEmpresaNombreCON] = useSessionStorage('empresaNombreCON', 'ND')
    const [usuario, setUsuario] = useSessionStorage('usuarioCON');
    const mounted = useRef();
    const [listCuentasCont, setListCuentasCont] = useState([]);
    const [listChecked, setListChecked] = useState([]);
    const [listExpanded, setListExpanded] = useState(["0"])
    const [listCuentas, setListCuentas] = useState([])

    const [spinnerModal, setSpinnerModal] = useState(undefined);
    const [spinnerLabel, setSpinnerLabel] = useState('');
    const [spinnerTipo, setSpinnerTipo] = useState(1);
    const botones = [

        {
            name: "btnHomeC",
            clase: "btn btn-sm pull-right flipInX animated",
            evento: () => volverAtras(),
            leyenda: "",
            iclase: faReply,
            tooltip: "Volver"
        },
        {
            name: "btnGuardar",
            clase: "btn btn-sm pull-right flipInX animated",
            evento: () => ingresarDatos(),
            leyenda: "",
            iclase: faSave,
            tooltip: "Guardar"
        }
    ]


    const listaCampos = {
        Cuenta: { value: '', attributes: { readOnly: false, focus: false, label: 'Cuenta', hidden: 'unset', Editando: false, maxLength: "255" } },
        Nombre: { value: "", attributes: { readOnly: false, focus: false, label: 'Nombre', hidden: 'unset', Editando: false, maxLength: "255" } },
        Tipo: { value: 0, attributes: { readOnly: false, focus: false, label: 'Tipo', hidden: 'unset', Editando: false, maxLength: "255" } },
        CuentaSAP: { value: '', attributes: { readOnly: false, focus: false, label: 'SYS', hidden: 'unset', Editando: false, maxLength: "255" } },
        Empresas: { value: 0, attributes: { readOnly: false, focus: false, label: 'Otras Empresas', hidden: 'unset', Editando: false, maxLength: "15" } },
        UtilizarNombreCuentaPadre:{ value: false, attributes: { readOnly: false, focus: false, label: 'Utilizar Nombre de Cuenta Padre', hidden: 'unset', Editando: false } },
        
    } 
    
    const [datos, setDatos] = useState(listaCampos);

    const [selectModalEr, setSelectModalEr] = useState(undefined);
    const [listaErrores, setListaErrores] = useState([]);
    const columnasEr = [{ dataField: 'Campo1', text: 'Empresa', csvText: 'Empresa', sort: true, hidden: false }, { dataField: 'Campo2', text: 'Cuenta', sort: true },, { dataField: 'Campo3', text: 'Error', sort: true }];
    const selectRowEr = { mode: '', clickToSelect: false, hideSelectColumn: true, onSelect: () => { } };
    const [cellEditEr, setCellEditEr] = useState({ mode: '', blurToSave: false, autoSelectText: false });
    //Seguridad
    const [usuarioS, setUsuarioS] = useSessionStorage('UsuarioSCON');
    const [menuId, setMenuId] = useState(0);
    const [menuOpciones, setMenuOpciones] = useState([]);
    const [showModalSeguridad, setShowModalSeguridad] = useState(false);
    const [opcionValidar, setOpcionValidar] = useState(0);
    const [opcionValidarNombre, setOpcionValidarNombre] = useState('');

    const spinnerModalMostrar = (pSpinnerModal, pSpinnerLabel, pSpinnerTipo) => {
        setSpinnerModal(pSpinnerModal);
        setSpinnerLabel(pSpinnerLabel);
        setSpinnerTipo(pSpinnerTipo);
    }
    
   
    useEffect(() => {

        if (!mounted.current) {
            const carga = async () => {
                await cargarDatos()
            }
            carga();
            mounted.current = true;
        }

    }, [])

    const cargarDatos = async () => {
        let spinnerLabel = 'Cargando datos...';
        spinnerModalMostrar(true, spinnerLabel, 3)


		const _ListCuentasCont = await carga_ListTree();
		setListCuentasCont(_ListCuentasCont);

        //SEGURIDAD
        const _MenuNomb = await cargarMenuNombre(Config.Modulo, optSeg.TMenuSistema.CatalogodeCuentas.value);
        let _menuId = 0;

        if (_MenuNomb.ID != undefined) {
            _menuId = _MenuNomb.ID;
        }
        const _UsuarioS = usuarioS;
        let _menuOpciones = null;

        if (_menuId > 0) {
            _menuOpciones = await cargarMenuOpciones(Config.Modulo, _UsuarioS, _menuId);
        }
        setMenuId(_menuId), setMenuOpciones(_menuOpciones)

        spinnerModalMostrar(false, '', 3)
    }

    const volverAtras = () => {
        historyMenu.push(SiteRutas.CatalogoCuentas);
    }
    
    
    const carga_ListTree = async () => {

		const response = await Catalogo_Lista_Request(token, empresa, 0);
		let _lista = [];
		if (response.Exitoso) {
			const _listCuentas = response.Datos;
			const _listCuentasCont = llenadoListaArbol(_listCuentas);
			setListCuentas(_listCuentas);
			_lista = datosArbolCheck(_listCuentasCont, true);
		}
		else {
			Notificacion.error(response.Mensaje);
			await volverAtras();
		}

		return _lista;

	}

	const llenadoListaArbol = (pLista) => {
		let _Datos = [];
		const _Lista = pLista;
		const _Empresa = empresaNombreCON;
		//(item.Padres.length > 0 ? parseInt(item.Padres.substring(item.Padres.length - 6, item.Padres.length)) :  0);
		_Datos.push({ "title": _Empresa, "subtitle": "", "padre": -1, "value": 0, "disabled":"true" });

		_Lista.map(function (item, index) {
			_Datos.push({ "title": item.Cuenta + " " + item.Nombre, "subtitle": "", "padre": (item.Padres.length > 0 ? parseInt(item.Padres.substring(item.Padres.length - 6, item.Padres.length)) : 0), "value": item.ID });
		});

		return _Datos;
	}   
    //procesar datos


    const ingresarDatosSel = () => {
        let resultado = false;
    Swal.fire({
        title: 'Atención',
        html: '<h4>¿Está seguro de querer crear la nueva cuenta ?',
        type: 'question',
        showCancelButton: true,
        confirmButtonColor: '#10a599',
        cancelButtonColor: '#d33',
        confirmButtonText: '<h5><i class="fa fa-check fa-fw"></i> Sí</h5>',
        cancelButtonText: '<h5><i class="fa fa-remove fa-fw"></i> No</h5>',
        reverseButtons: true,
        allowOutsideClick: false,
    }).then((result) => {
        if (result.value) {
            resultado = true;
            ingresarDatosMasivo();
        } else if (result.dismiss === Swal.DismissReason.cancel) {
            resultado = false;
        }
    });
        return resultado;
    }



    const ingresarDatos = async () => {
        if (validarDatos()) {            
            const optSegopt = optSeg.TOpciones_Menu;
            const _value =  optSegopt.NuevoMasivo.value;
            let validar = validarMenuOpcion(_value);
            if (!validar) {
                await ingresarDatosSel();
            }
        }
    
    }
    
    const ingresarDatosMasivo = async () => {
        if (validarDatos()) {
          let spinnerLabel = 'Ingresando datos';
          spinnerModalMostrar(true, spinnerLabel, 3)
            let resultado = '';
            resultado = await Catalogo_Guardar_Masivo_Request(token,empresa, JSON.stringify(listChecked), datos.Nombre.value,datos.Cuenta.value,datos.UtilizarNombreCuentaPadre.value);
            
            spinnerModalMostrar(false, '', 3)
            if (resultado.Exitoso == true) {
                Notificacion.success('Se almacenó la información con éxito.');
                volverAtras();
            }
            else {
                if (isNaN(resultado.Mensaje.trim())) {
                    Notificacion.error(`Error: ${resultado.Mensaje}`);
                    spinnerModalMostrar(false, '', 3);
                    setSelectModalEr(true);
                    setListaErrores(resultado.Datos);
                }
                else {
                    Notificacion.success('Se almacenó la información con éxito.');
                    volverAtras();
                }
            }
            //volverAtras();
        }
    }
    
    
    
    const validarDatos = () => {
        const _datos = datos;
        if (_datos.Nombre.value.trim().length == 0) {
            Notificacion.error('Error: Debe ingresar el dato: Nombre.');
            return false;
        }
        if (_datos.Cuenta.value.trim().length == 0) {
            Notificacion.error('Error: Debe ingresar el dato: Cuenta.');
            return false;
        }
        // if (_datos.CuentaSAP.value.trim().length == 0) {
        //     Notificacion.error('Error: Debe ingresar el dato: SYS');
        //     return false;
        // }

        return true;
    }
    
    
    const onChangeInput = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        let newAttributes = datos[name].attributes;
        // newAttributes.focus = true; //Se asigna foco al componente
        const Datos = Object.assign({}, datos, { [name]: { value: value, attributes: newAttributes } })
        setDatos(Datos);
    }


    const handleCheck = (pCheck, targetNode) => {

        setListChecked(pCheck);
    }
    
    const handelExp = (pCheck) => {
        setListExpanded(pCheck);
    }  
    
    const handleCheckBox = async (event) => {
        const name = event.target.name;
        const value = event.target.checked;
        let newAttributes = datos[name].attributes;
        // newAttributes.focus = true; //Se asigna foco al componente
        let Datos = Object.assign({}, datos, { [name]: { value: value, attributes: newAttributes } })

        setDatos(Datos);
    }    

//modal de errores

const cerrarModalEr = () => {
    setSelectModalEr(undefined);
    setListaErrores([]);
    volverAtras();
}



//Seguridad
const cargarMenuOpciones = async (pModuloId, pUsuarioId, pMenuId) => {
    try {

        let listMO = await Obtener_MenuOpciones_Lista_Request(token, pModuloId, pUsuarioId, pMenuId);
        if (listMO.Exitoso === false) {
            return null;
        }
        return listMO.Datos;
    }
    catch (err) {
        Notificacion.error(`Error: cargarMenuOpciones.`);
    }
}

const cargarMenuNombre = async (pModulo, pMenuNombre) => {
    try {
        let listMON = await Obtener_MenuNombre_Request(token, pModulo, pMenuNombre);
        if (listMON.Exitoso == false) {
            return null;
        }
        return listMON.Datos;
    }
    catch (err) {
        Notificacion.error(`Error: cargarMenuNombre.`);
    }
}

const validarMenuOpcion = (pOpcion) => {
    let validar = false;
    let _menuOpciones = menuOpciones;
    const optSegopt = optSeg.TOpciones_Menu;
    let resultado = _menuOpciones.filter((item) => item.Opcion_Nombre == pOpcion);
    if (resultado.length > 0) {
        if (resultado[0].Opcion_Validar) {
            setShowModalSeguridad(true); setOpcionValidar(resultado[0].Opcion_Id); setOpcionValidarNombre(pOpcion);
            validar = true;
        }
    } else {
        setShowModalSeguridad(true); setOpcionValidar(resultado[0].Opcion_Id); setOpcionValidarNombre(pOpcion);
        validar = true;
        //Notificacion.error('No existe opción en la seguridad');
    }
    return validar;
};

const handleCerrarModal = () => setShowModalSeguridad(false);

const onActionResultModal = (pValido) => {
    if (pValido) {
        let _OpcionNom = opcionValidarNombre;
        setShowModalSeguridad(false); setOpcionValidar(0); setOpcionValidarNombre('');
        const _optSegopt = optSeg.TOpciones_Menu;
        switch (_OpcionNom) {
            case _optSegopt.NuevoMasivo.value:
                ingresarDatosSel();
                break;
            default:
                break;
        }
    }
}


    return (
        <Fragment>
        <InsertarMasivoInt
            botones={botones}
            Titulo={'Cuenta Copia Masivo'}
            Datos={datos}
            onChangeInput={onChangeInput}
            listCuentasCont = {listCuentasCont}
            listChecked={listChecked}
            listExpanded={listExpanded}
            handleCheck={handleCheck}
            handelExp={handelExp}
            handleCheckBox={handleCheckBox}
        
        />
        <ModalSpinner
            selectedModal={spinnerModal}
            contentLabel={'spinnerModalProgress'}
            label={spinnerLabel}
            tipoSpinner={spinnerTipo}
        />
        <ModalSeguridad
            //token={this.props.token}
            modalTitle={'Requiere Permisos'}
            menuId={menuId}
            opcionId={opcionValidar}
            show={showModalSeguridad}
            onActionResult={onActionResultModal}
            onHide={handleCerrarModal}
        />
        <ModalErrores
        selectedModal={selectModalEr}
        contentLabel={'selectedListaErrores'}
        datos={listaErrores}
        id={'Campo2'}
        columnas={columnasEr}
        striped={false}
        hover={true}
        condensed={false}
        selectRow={selectRowEr}
        label={'Creación de Cuentas'}
        cellEdit={cellEditEr}
        cerrarModal={cerrarModalEr}
        verLHOC={false}
    />        
    </Fragment>
    );
};
export default withRouter(memo(insertarMasivo))