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 MantParametrosInt from './MantParametrosInt.jsx';
import { SiteRutas } from '../../../request/RutasConfig.jsx';
import { validaCorreo, validaTelefono } from '../../../components/Util/Util.jsx';
//Invocaciones datos
import { Parametros_Listar_Request, Parametros_Consulta_Request, Parametros_Guardar_Request, Parametros_Modificar_Request,
    TipoAsiento_Listar_Request } from "../../../request/MantenimientosRequest.jsx"
import {ParametroGenerales_Consulta_Request} from "../../../request/ServicioRequest.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 { itemSelect } from '../../../components/Util/Util.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';


function mantParametros(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(false);
    const [id, setId] = 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 listaEstado = Config.listaEstadoAsientos.filter((item)=> item.value <3);
    const [selectedEstado, setSelectedEstado] = useState(itemSelect(1, listaEstado));


    const listaCampos = {
        TipoAsiento: { value: 0, attributes: { readOnly: true, focus: false, label: 'Identificador', hidden: 'unset', Editando: false, maxLength: "20" } },
        Estado: { value: '', attributes: { readOnly: false, focus: false, label: 'Estado de Asientos de Interfaces', hidden: 'unset' } },
        Rep_BalanceSit: { value: "", attributes: { readOnly: false, focus: false, label: 'Título en Reporte de Balance de Situación', hidden: 'unset', Editando: false, maxLength: "50" } },
        Rep_DiarioGral: { value: "", attributes: { readOnly: false, focus: false, label: 'Título en Reporte de Diario General', hidden: 'unset', Editando: false, maxLength: "50" } },
        Rep_AsientoDiario: { value: "", attributes: { readOnly: false, focus: false, label: 'Título en Reporte de Asientos de Diario', hidden: 'unset', Editando: false, maxLength: "50" } },
        Rep_EstadoResult: { value: "", attributes: { readOnly: false, focus: false, label: 'Título en Reporte de Estado de Resultados', hidden: 'unset', Editando: false, maxLength: "50" } },
        CedulaJuridica: { value: "", attributes: { readOnly: false, focus: false, label: 'Utilizar Cédula Jurídica como:', hidden: 'unset', Editando: false, maxLength: "30" } },
        Rep_AsientoDiarioConsolidado: { value: "", attributes: { readOnly: false, focus: false, label: 'Título en Reporte de Asientos de Diario Consolidado', hidden: 'unset', Editando: false, maxLength: "50" } },
        PermiteCrecer: { value: false, attributes: { readOnly: false, focus: false, label: 'Permite que Crezcan los Detalles en Diario General', hidden: 'unset' } },
    }

    const listaMod = {
        "Empresa": 0,
        "TipoAsiento": 0,
        "EstadAsienInterface": 0,
        "CaractReport": "0.00",
        "RepAsientos": "0.00",
        "Fecha_Actualizacion": new Date(),
        "Rep_BalanceSit": "",
        "Rep_DiarioGral": "",
        "Usuario_Modifica": "",
        "Usuario_Fecha_Actualiza": new Date(),
        "Rep_AsientoDiario": "",
        "Rep_EstadoResult": "",
        "Rep_AsientoDiarioConsolidado": "",
        "PermiteCrecer" : false

    }
    const [datos, setDatos] = useState(listaCampos);
    const [listaModel, setListaModel] = useState(listaMod);
    const [listaTA, setListaTA] = useState([]);
    const Label_Cedula_Juridica = 'Label_Cedula_Juridica';

    //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);
    }

    const llenarListaDatos = () => {
        let _Campos = datos;
        let _Datos = listaModel;
        _Datos.Empresa = empresa;
        _Datos.TipoAsiento = _Campos.TipoAsiento.value;
        _Datos.EstadAsienInterface = selectedEstado.value;
        _Datos.Rep_BalanceSit = _Campos.Rep_BalanceSit.value;
        _Datos.Rep_DiarioGral = _Campos.Rep_DiarioGral.value;
        _Datos.Rep_AsientoDiario = _Campos.Rep_AsientoDiario.value;
        _Datos.Rep_EstadoResult = _Campos.Rep_EstadoResult.value;
        _Datos.Usuario_Modifica = usuario;
        _Datos.CedulaJuridicaLbl = Label_Cedula_Juridica;
        _Datos.CedulaJuridicaValor = _Campos.CedulaJuridica.value;
        _Datos.Rep_AsientoDiarioConsolidado = _Campos.Rep_AsientoDiarioConsolidado.value;
        _Datos.PermiteCrecer = _Campos.PermiteCrecer.value;
        return _Datos;
    }

    const asociarDatos = (pDatos) => {
        let _Campos = listaCampos;
        _Campos.TipoAsiento.value = pDatos.TipoAsiento;
        _Campos.Estado.value = pDatos.EstadAsienInterface;
        _Campos.Rep_BalanceSit.value = pDatos.Rep_BalanceSit;
        _Campos.Rep_DiarioGral.value = pDatos.Rep_DiarioGral;
        _Campos.Rep_AsientoDiario.value = pDatos.Rep_AsientoDiario;
        _Campos.Rep_EstadoResult.value = pDatos.Rep_EstadoResult;
        _Campos.Rep_AsientoDiarioConsolidado.value = pDatos.Rep_AsientoDiarioConsolidado;
        _Campos.PermiteCrecer.value = pDatos.PermiteCrecer;
        //_Campos.CedulaJuridica.value = "cedula juridica";
        setSelectedEstado(itemSelect(pDatos.EstadAsienInterface, listaEstado));
        

        return _Campos;
    }

const cargarTipoAsiento = async ()=>{
    const _ListaAP = await TipoAsiento_Listar_Request(token,empresa);
    if(_ListaAP.Exitoso){
        return _ListaAP.Datos;
    }else{
        Notificacion.error(`${_ListaAP.Mensaje}. Debe parametrizar los tipos de asientos que utiliza el sistema.`);
        spinnerModalMostrar(false, '', 3);
        volverAtras();
    };

};


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

    const cargarDatos = async () => {
        let spinnerLabel = 'Cargando datos...';
        let _cedulaJur= '';
        spinnerModalMostrar(true, spinnerLabel, 3)
        //let _id = (props.match.params.id == '0') ? '' : props.match.params.id;
        //se tiene que cargar datos si existen  y depende de esto es modificar o gurardar
        let _HayDatos = false;
        const _ListAP = await cargarTipoAsiento();
          const responseH = await Parametros_Listar_Request(token, empresa);
          if (responseH.Exitoso) {
            _HayDatos = (responseH.Datos.length > 0);
          }
          const parmGral = await ParametroGenerales_Consulta_Request(token,Label_Cedula_Juridica);
          if(parmGral.Exitoso){
            _cedulaJur= parmGral.Datos.Parametro_Valor;
          }
          let _listaCampos= {...listaCampos} ;
          let _MinIdTa = 0;
          if (_HayDatos) {
              //hacer el response
              const response = await Parametros_Consulta_Request(token, empresa, responseH.Datos[0].TipoAsiento);
              if (response.Exitoso) {
                  let _datos = asociarDatos(response.Datos);
                _datos.CedulaJuridica.value = _cedulaJur;
                  setDatos(_datos);
                  setCodigo(true);
                  setListaTA(_ListAP);
              }

              else {
                  Notificacion.error(response.Mensaje);                  
                 _MinIdTa = obtieneMenorIDTA(_ListAP);                  
                  _listaCampos.CedulaJuridica.value = _cedulaJur;
                  _listaCampos.TipoAsiento.value = _MinIdTa;
                  setDatos(_listaCampos);
                  setCodigo(false);
                  setListaTA(_ListAP);
                  spinnerModalMostrar(false, '', 3);
              }
              //setId(_id);
          }
          else {            
             _MinIdTa = obtieneMenorIDTA(_ListAP);                  
            _listaCampos.CedulaJuridica.value = _cedulaJur;
            _listaCampos.TipoAsiento.value = _MinIdTa;
            setDatos(_listaCampos);
            setCodigo(false);
            setListaTA(_ListAP);
            spinnerModalMostrar(false, '', 3);
        }


        const _MenuNomb = await cargarMenuNombre(Config.Modulo, optSeg.TMenuSistema.Parametros.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 obtieneMenorIDTA=(pListAP)=>{
        const _LTA =  pListAP;
        let _Min = _LTA[0].ID;
        for (var i = 0; i < _LTA.length ; i++) {
            if (_LTA[i].ID < _Min) {
                _Min = _LTA[i].ID;
            }
        }
        return _Min;
    }

    useEffect(() => {

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

    }, [])

    //procesar datos
    const ingresarDatos = async () => {
        if (validarDatos()) {
            const _id = id;
            const optSegopt = optSeg.TOpciones_Menu;
            const _value = (_id > 0) ? 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 == true) {
                 resultado = await Parametros_Modificar_Request(token, JSON.stringify(_data));
             }
             else {
                 resultado = await Parametros_Guardar_Request(token, JSON.stringify(_data));
             };
            spinnerModalMostrar(false, '', 3)
             if (resultado.Exitoso == true) {
                 Notificacion.success('Se actualizó la información con éxito.');
             }
             else {
                 if (isNaN(resultado.Mensaje.trim())) {
                     Notificacion.error(`Error: ${resultado.Mensaje}`);
                 }
                 else {
                    Notificacion.success('Se almacenó la información con éxito.');
                 }
             }
            volverAtras();
        }
    }

    const validarDatos = () => {
        //const _datos = datos;

        //Notificacion.info('EValidando datos');
        //     return false;

        // if (_datos.Nombre.value.trim().length == 0) {
        //     Notificacion.error('Error: Debe ingresar el dato: Nombre');
        //     return false;
        // }
        // if (_datos.Telefono.value.trim().length > 0) {
        //   if (!validaTelefono(_datos.Telefono.value.trim())) {
        //       Notificacion.error(`Error: Debe ingresar un número de teléfono válido`);
        //       return false;
        //   }
        // }
        // if (_datos.Fax.value.trim().length > 0) {
        //   if (!validaTelefono(_datos.Fax.value.trim())) {
        //       Notificacion.error(`Error: Debe ingresar un número de fax válido`);
        //       return false;
        //   }
        // }
        // if (_datos.Email.value.trim().length > 0) {
        //   if (!validaCorreo(_datos.Email.value.trim())) {
        //       Notificacion.error(`Error: Debe ingresar un correo electrónico válido`);
        //       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 onhandleSelectedEstado = (selSeccion) => { setSelectedEstado(selSeccion); };

    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);
    }

    //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;
                default:
                    break;
            }
        }
    }


    return (
        <Fragment>
            <MantParametrosInt
                botones={botones}
                Titulo={'Parámetros'}
                Datos={datos}
                onChangeInput={onChangeInput}
                listaEstado={listaEstado}
                selectedEstado={selectedEstado}
                onhandleSelectedEstado={onhandleSelectedEstado}
                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}
            />
        </Fragment>
    );
};
export default memo(mantParametros);