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 MantCatalogoCuentasInt from './mantCatalogoCuentasInt.jsx';
import { SiteRutas } from '../../../request/RutasConfig.jsx';
import { validaCorreo, validaTelefono, itemSelect } from '../../../components/Util/Util.jsx';
//Invocaciones datos
import { SubTiposCuentas_Listar_Request } from "../../../request/MantenimientosRequest.jsx"
import { Catalogo_Consulta_Request, Catalogo_ConsultaCuenta_Request,Catalogo_Guardar_Request, Catalogo_ModificarCatTipo_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';






export function mantCatalogoCuentas(props) {
    let historyMenu = useHistory();
    const [token, setToken] = useSessionStorage('tokenCON', '');
    const [empresa, setEmpresa] = useSessionStorage('empresaCON', 0);
    const [usuario, setUsuario] = useSessionStorage('usuarioCON');
    const mounted = useRef();
    const [codigo, setCodigo] = useState('');
    const [id, setId] = useState('');
    const [idP, setIdP] = useState('');
    const [idR, setIdR] = useState('');
    const [selectedOptionTipo, setSelectedOptionTipo] = useState(null);
    const [listaSubCuentas, setListaSubCuentas] = useState([]);
    const [selectedEmpresas, setSelectedEmpresas] = useState(null);
    const [listaEmpresas, setListaEmpresas] = useState(null);

    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: true, 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" } },
    }

    const listaModel = {
        "Empresa": 0,
        "ID": 0,
        "Cuenta": '',
        "Nombre": '',
        "Padres": '',
        "Tipo": 0,
        "Nivel": 0,
        "Saldo00": 0,
        "Saldo01": 0,
        "Saldo02": 0,
        "Saldo03": 0,
        "Saldo04": 0,
        "Saldo05": 0,
        "Saldo06": 0,
        "Saldo07": 0,
        "Saldo08": 0,
        "Saldo09": 0,
        "Saldo10": 0,
        "Saldo11": 0,
        "Saldo12": 0,
        "Estado": 0,
        "FechaActualizacion": '',
        "CuentaSAP": '',
        "UsuarioModifica": '',
        "UsuarioFechaActualiza": '',
        "ColumnaNombre": '',
        "Total": 0,
        "MsgError": '',
        "IdPadre":0,
        "CambiaTipo": false
    }


    const [datos, setDatos] = useState(listaCampos);
    const [catalogoResp, setCatalogoResp] = useState(listaModel);

    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)
        let _id = props.match.params.idh;
        let _idp = props.match.params.idp;
        let _idr = props.match.params.idr;
        const _listaSubCuentas = await cargarSubtipoCuentas();
        const _listaEmpresa = await cargarEmpresas(empresa);
        let _SelectedOptionTipo = _listaSubCuentas[0];
        if (_id > 0) {
            const response = await Catalogo_Consulta_Request(token, empresa, _id);
            if (response.Exitoso) {
                let _datos = asociarDatos(response.Datos);
                _datos = HabilitarCampos(_datos, true, _idp, _id, _idr);
                _SelectedOptionTipo = itemSelect(_datos.Tipo.value, _listaSubCuentas);
                setDatos(_datos);
                setCodigo(_id);
                setCatalogoResp(response.Datos);
            }
            else {
                Notificacion.error(response.Mensaje);
                spinnerModalMostrar(false, '', 3)
                volverAtras();
            }
        } else {
            let _datosI = listaCampos;
            if (_idp > 0) {
                const response = await Catalogo_Consulta_Request(token, empresa, _idp);
                if (response.Exitoso) {
                    let _datos = listaCampos;//asociarDatos(response.Datos);
                    _datos = HabilitarCampos(_datos, false, _idp, _id, _idr);
                    _SelectedOptionTipo = itemSelect(response.Datos.Tipo, _listaSubCuentas);
                    _datos.Cuenta.attributes.label = _datos.Cuenta.attributes.label + '  ' + response.Datos.Cuenta;
                    setDatos(_datos);
                    //setCodigo(_id);
                    //setCatalogoResp(response.Datos);
                }
                else {
                    Notificacion.error(response.Mensaje);
                    spinnerModalMostrar(false, '', 3)
                    volverAtras();
                }
            } else {

                _datosI = HabilitarCampos(_datosI, false, _idp, _id, _idr);
                setDatos(_datosI);
                //    setCodigo(_id);
            }
        }

        //const _SelectedOptionTipo = (_id > 0 ? itemSelect(datos.Tipo.value, _listaSubCuentas) : _listaSubCuentas[0]);
        setId(_id);
        setIdP(_idp);
        setIdR(_idr);
        setSelectedOptionTipo(_SelectedOptionTipo);
        setListaSubCuentas(_listaSubCuentas);
        setListaEmpresas(_listaEmpresa);
        setSelectedEmpresas(_listaEmpresa);

    










        //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 llenarListaDatos = () => {
        let _Campos = datos;
        let _Datos = {... catalogoResp};
        _Datos.Cuenta = _Campos.Cuenta.value;
        _Datos.Tipo = selectedOptionTipo.value;//_Campos.Tipo.value;
        _Datos.Empresa = empresa;
        _Datos.Nombre = _Campos.Nombre.value;
        _Datos.CuentaSAP = _Campos.CuentaSAP.value;
        _Datos.Usuario_Modifica = usuario;
        _Datos.IdPadre = idP;
        _Datos.CambiaTipo = (idR > 0);
        _Datos.UsuarioModifica = usuario;
        return _Datos;
    }

const asociarDatos = (pDatos) => {
    let _Campos = listaCampos;
    _Campos.Cuenta.value = pDatos.Cuenta;
    _Campos.Nombre.value = pDatos.Nombre;
    _Campos.Tipo.value = pDatos.Tipo;
    _Campos.CuentaSAP.value = pDatos.CuentaSAP;

    return _Campos
}
const HabilitarCampos = (pCampos, pModificar, pIdp, pIdh, pIdr) => {
    let _pCampos = { ...pCampos };

    if (pModificar) {
        _pCampos.Cuenta.attributes.readOnly = ((pIdh > 0) || (pIdr > 0)) ? true : false;
        _pCampos.Nombre.attributes.readOnly = ((pIdh > 0) && (pIdr > 0)) ? true : false;
        _pCampos.Tipo.attributes.readOnly = ((pIdh > 0) && (pIdr > 0)) ? false : true;
        _pCampos.CuentaSAP.attributes.readOnly = ((pIdh > 0) && (pIdr > 0)) ? true : false;
    } else {
        _pCampos.Cuenta.attributes.readOnly = false;
        _pCampos.Nombre.attributes.readOnly = false;
        _pCampos.Tipo.attributes.readOnly = ((pIdp == 0) && (pIdr > 0)) ? false : true;
        _pCampos.CuentaSAP.attributes.readOnly = false;
    }
    pCampos.Empresas.attributes.hidden = (pModificar) ? 'none' : 'unset';
    return _pCampos;
}

const cargarSubtipoCuentas = async () => {
    const response = await SubTiposCuentas_Listar_Request(token, empresa);
    let _listaTC = [];
    if (response.Exitoso) {
        response.Datos.map(function (item) {
            _listaTC.push({ value: item.ID, label: item.Nombre });
        });
        return _listaTC;
    }
    else {
        Notificacion.error(response.Mensaje);
        spinnerModalMostrar(false, '', 3);
        volverAtras();
        return [];
    }
}

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


//procesar datos
const ingresarDatos = async () => {
    if (validarDatos()) {
        const _id = id;
        const optSegopt = optSeg.TOpciones_Menu;
        const _value = (_id > 0) ? (idR > 0 ? optSegopt.Reasignar.value : optSegopt.Editar.value) : optSegopt.Nuevo.value;
        let validar = validarMenuOpcion(_value);
        if (!validar) {
            await ingresarDatosSel();
        }
    }

}

const ingresarDatosSel = async () => {
    if (validarDatos()) {
      let spinnerLabel = id.length > 0 ? 'Actualizando datos' : 'Ingresando datos';
      spinnerModalMostrar(true, spinnerLabel, 3)
        const _data = llenarListaDatos();
        
        let resultado = '';
        if (codigo.length > 0) {
            resultado = await Catalogo_ModificarCatTipo_Request(token, JSON.stringify(_data));
        }
        else {
            let _ListEmp = "";
            if(selectedEmpresas != null){
                selectedEmpresas.map(function (item) {
                    _ListEmp  =  (_ListEmp.length == 0) ? `${item.value}` : _ListEmp + `,${item.value}`;

            });
        }
            resultado = await Catalogo_Guardar_Request(token, JSON.stringify(_data),_ListEmp);
        };
        spinnerModalMostrar(false, '', 3)
        if (resultado.Exitoso == true) {
            Notificacion.success('Se actualizó 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;
    }
    if (selectedOptionTipo  == null){
        Notificacion.error('Error: Debe ingresar el dato: Tipo.');
        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 onhandleSelectedTipo = (pSelect) => {
    setSelectedOptionTipo(pSelect);

}
const onhandleSelectEmpresas = (selectedEmpresas) => {
    setSelectedEmpresas(selectedEmpresas);
}

const cargarEmpresas = async (pEmpresa) => {

    let response = await Empresa_lista_Request(token);
    let _ListaEmpresas = [];

    if (response.Exitoso) {

        _ListaEmpresas = response.Datos.filter(item => item.Id != pEmpresa).map((x) => {
            return { value: x.Id, label: x.Nombre }
        });
        return _ListaEmpresas;
    } else {
        Notificacion.error(response.Mensaje);
        spinnerModalMostrar(false, '', 3);
        //volverAtras();
        return [];
    }

}

//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.Nuevo.value:
                ingresarDatosSel();
                break;
            case _optSegopt.Editar.value:
                ingresarDatosSel();
                break;
            case _optSegopt.Reasignar.value:
                ingresarDatosSel();
                break;
            default:
                break;
        }
    }
}

return (
    <Fragment>
        <MantCatalogoCuentasInt
            botones={botones}
            Titulo={'Detalle de Cuentas'}
            Datos={datos}
            onChangeInput={onChangeInput}
            selectedOptionTipo={selectedOptionTipo}
            listaSubCuentas={listaSubCuentas}
            selectedEmpresas={selectedEmpresas}
            listaEmpresas={listaEmpresas}
            onhandleSelectedTipo={onhandleSelectedTipo}
            onhandleSelectEmpresas={onhandleSelectEmpresas}
        />
        <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(mantCatalogoCuentas))