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 MantCatalogoCentroCostoInt from './mantCatalogoCentroCostoInt.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 { CentroCosto_Consulta_Request, CatalogoCentroCosto_ModificarCC_Request, CatalogoCentroCosto_GuardarCC_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 mantCatalogoCentroCosto(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); //no va
    const [selectedOptionEstado, setSelectedOptionEstado] = useState(null);
    const [listaSubCuentas, setListaSubCuentas] = useState([]); // no va
    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 = {
        CentroCosto: { value: '', attributes: { readOnly: true, focus: false, label: 'Centro Costo', hidden: 'unset', Editando: false, maxLength: "255" } },
        Nombre: { value: "", attributes: { readOnly: false, focus: false, label: 'Nombre', hidden: 'unset', Editando: false, maxLength: "255" } },
        Estado: { value: 0, attributes: { readOnly: false, focus: false, label: 'Estado', 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,
        "CentroCosto": 0,
        "Nombre": '',
        "Padres": '',
        "Nivel": 0,
        "Estado": 0,
        "FechaActualizacion": '',
        "UsuarioModifica": '',
        "UsuarioFechaActualiza": '',
        "MsgError": '',
        "Estdo_CXCC": '',
        "Dimension_ID": 0,
    }


    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: 'Centro de Costo', 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 volverAtras = () => {
        historyMenu.push(SiteRutas.CatalogoCentroCosto);
    }

    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 _listaCCostosEst = Config.ListaCentroCosto_Estado;
        const _listaEmpresa = await cargarEmpresas(empresa);
        let _SelectedOptionEstado =  itemSelect(1, _listaCCostosEst); //por defualt activo_listaCCostosEst[0];
        if (_id > 0) {
            const response = await CentroCosto_Consulta_Request(token, empresa, _id);
            if (response.Exitoso) {
                let _datos = asociarDatos(response.Datos);
                _datos = HabilitarCampos(_datos, true, _idp, _id, _idr);
                _SelectedOptionEstado = itemSelect(_datos.Estado.value, _listaCCostosEst);
                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 CentroCosto_Consulta_Request(token, empresa, _idp);
                if (response.Exitoso) {
                    let _datos = listaCampos;//asociarDatos(response.Datos);
                    _datos = HabilitarCampos(_datos, false, _idp, _id, _idr);
                    _datos.CentroCosto.attributes.label = _datos.CentroCosto.attributes.label + '  ' + response.Datos.CentroCosto;
                    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);
            }
        }

        setId(_id);
        setIdP(_idp);
        setIdR(_idr);
        setSelectedOptionEstado(_SelectedOptionEstado);
        setListaEmpresas(_listaEmpresa);
        setSelectedEmpresas(_listaEmpresa);




        //SEGURIDAD
        const _MenuNomb = await cargarMenuNombre(Config.Modulo, optSeg.TMenuSistema.CatalogodeCentrodeCosto.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 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 [];
        }

    }

    const llenarListaDatos = () => {
        let _Campos = datos;
        let _Datos = { ...catalogoResp };
        _Datos.CentroCosto = _Campos.CentroCosto.value;
        _Datos.Estado = selectedOptionEstado.value;//_Campos.Tipo.value;
        _Datos.Empresa = empresa;
        _Datos.Nombre = _Campos.Nombre.value;
        _Datos.Usuario_Modifica = usuario;
        _Datos.IdPadre = idP;
        _Datos.Estdo_CXCC = _Datos.Estado;
        _Datos.UsuarioModifica = usuario;
        return _Datos;

    }

    const asociarDatos = (pDatos) => {
        let _Campos = listaCampos;
        _Campos.CentroCosto.value = pDatos.CentroCosto;
        _Campos.Nombre.value = pDatos.Nombre;
        _Campos.Estado.value = pDatos.Estado;


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

        _pCampos.Nombre.attributes.readOnly = false;
        _pCampos.Estado.attributes.readOnly = false;

        if (pModificar) {
            _pCampos.CentroCosto.attributes.readOnly = true
        } else {
            _pCampos.CentroCosto.attributes.readOnly = false;
        }
        pCampos.Empresas.attributes.hidden = (pModificar) ? 'none' : 'unset';
        return _pCampos;
    }


    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 onhandleSelectedEstado = (pSelect) => {
        setSelectedOptionEstado(pSelect);
    
    }
    const onhandleSelectEmpresas = (selectedEmpresas) => {
        setSelectedEmpresas(selectedEmpresas);
    }



    const validarDatos = () => {
        const _datos = datos;
        if (_datos.Nombre.value.trim().length == 0) {
            Notificacion.error('Error: Debe ingresar el dato: Nombre.');
            return false;
        }
        if (_datos.CentroCosto.value.trim().length == 0) {
            Notificacion.error('Error: Debe ingresar el dato: Cuenta.');
            return false;
        }
        if (selectedOptionEstado  == null){
            Notificacion.error('Error: Debe ingresar el dato: Estado.');
            return false;
        }
        return true;
    }
//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 CatalogoCentroCosto_ModificarCC_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 CatalogoCentroCosto_GuardarCC_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();
        }
    }
//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>
            <MantCatalogoCentroCostoInt
                botones={botones}
                Titulo={"Detalle Centro de Costos"}
                Datos={datos}

                onChangeInput={onChangeInput}
                selectedOptionEstado={selectedOptionEstado}
                listaEstado={Config.ListaCentroCosto_Estado}
                selectedEmpresas={selectedEmpresas}
                listaEmpresas={listaEmpresas}
                onhandleSelectedEstado={onhandleSelectedEstado}
                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(mantCatalogoCentroCosto));