import React, { Fragment, memo, useEffect, useState, useRef } from 'react';
import { withRouter, useHistory } from "react-router-dom";
import { SiteRutas, ImagenesRutas } from '../../request/RutasConfig.jsx';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faReply, faSave } from '@fortawesome/free-solid-svg-icons';
//import { Link } from "react-router-dom";
//import LocalStorage from '../Tools/LocalStorage'
//import Session from '../Tools/session'

//Invocaciones datos
//import { CerrarSesion, Cambiar_Password } from "../../request/servicio.jsx";
import { Cambiar_Contrasena_Request } from "../../request/LoginRequest.jsx";
import CambiarContrasenaInt from './cambiarContrasenaInt.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';
//librerias
import { muestraArbolEmpleados } from '../../components/Util/Util.jsx';

//const Progress = NProgress;

function cambiarContrasena(props) {

    const mounted = useRef();
    let historyMenu = useHistory();

    const DatosConst = {
        Usuario: { value: '', attributes: { readOnly: true, focus: false, label: 'Usuario', hidden: 'unset', maxLength: "100", Editando: false } },
        Usuario_Login: { value: '', attributes: { readOnly: true, focus: false, label: 'Login', hidden: 'unset', maxLength: "50", Editando: false } },
        Usuario_OldPassword: { value: '', attributes: { readOnly: false, focus: false, label: 'Contraseña Actual', hidden: 'unset', maxLength: "100", Editando: false } },
        Usuario_NewPassword: { value: '', attributes: { readOnly: false, focus: false, label: 'Contraseña Nueva', hidden: 'unset', maxLength: "100", Editando: false } },
        Usuario_NewPassword2: { value: '', attributes: { readOnly: false, focus: false, label: 'Confirmar Contraseña', hidden: 'unset', maxLength: "100", Editando: false } }
    };


    const [datos, setDatos] = useState(DatosConst);
    const [token, setToken] = useSessionStorage('tokenCON', '');
    const [usuario, setUsuario] = useSessionStorage('usuarioCON');
    const [empresa, setEmpresa] = useSessionStorage('empresaCON');
    const [usuarioNombre, setUsuarioNombre] = useSessionStorage('usuarioNombreCON');

    const [spinnerModal, setSpinnerModal] = useState(undefined);
    const [spinnerLabel, setSpinnerLabel] = useState('');
    const [spinnerTipo, setSpinnerTipo] = useState(1);
    const botones = [
        {
            name: "btnHomeCC",
            clase: "btn btn-sm pull-right flipInX animated",
            evento: () => OnCancelarClick(),
            leyenda: "",
            iclase: faReply,
            tooltip: "Cancelar"
        }
        , {
            name: "btnGuardarCC",
            clase: "btn btn-sm pull-right flipInX animated",
            evento: () => OnGuardarClick(),
            leyenda: "",
            iclase: faSave,
            tooltip: "Guardar"
        }
    ]


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


    useEffect(() => {
        if (!mounted.current) {
            muestraArbolEmpleados(false);
            const carga = async () => {
                await cargarDatosPantalla()
            }
            carga();
            mounted.current = true;
        }
    }, [])

    const cargarDatosPantalla = async () => {
        let spinnerLabel = 'Cargando datos...';
        console.log(`props.match.params.inicio: ${props.match.params.inicio}`);
        let _Inicio  = (props.match.params.inicio == '1') ? true : false;
        spinnerModalMostrar(true, spinnerLabel, 3);
        let _Datos = { ...datos };
        _Datos.Usuario_Login.value = (_Inicio ==true) ? '' : usuario;
        _Datos.Usuario.value = (_Inicio ==true) ? '' : usuarioNombre
        _Datos.Usuario_Login.attributes.readOnly = (_Inicio == true) ? false : true ;
        _Datos.Usuario.attributes.hidden = (_Inicio == true) ? 'none' :'unset' ;
        setDatos(_Datos);

        //setDatos(_Datos);
        await ObtieneUsuarioId(usuario);
        spinnerModalMostrar(false, '', 3)
    }


    const ObtieneUsuarioId = async (pUsuario_Login) => {
        //const result = await LoginRequest.ConsultaLogin(pUsuario_Login);
        // const result = ''
        //   if (result !== undefined) {
        //       this.setState({ Usuario_Id: result.Usuario_Id })
        //   } else {
        //       toastr.error('Error al obtener el Id');
        //         Error({ text: 'Error: Error al obtener el Id', progress: Progress });
        //   }
    };

    const OnCancelarClick = () => {
        historyMenu.push(SiteRutas.Login);
    };

    const onCerrarSesion = async () => {
        //const session = new Session();
        //session.remove('Usuario');
        // //session.remove('Usuario_id');
        // const respuesta = await CerrarSesion();

    }
    const OnGuardarClick = async () => {

        if (ValidarCampos()) {
            const _Datos = datos;
            spinnerModalMostrar(true, 'Cambio contraseña ...', 3);

            const result = await Cambiar_Contrasena_Request(token, _Datos.Usuario_Login.value, _Datos.Usuario_OldPassword.value, _Datos.Usuario_NewPassword.value, _Datos.Usuario_NewPassword2.value);
            if (result.Exitoso) {
                //toastr.success('Contraseña modificada correctamente.')
                Notificacion.success('Contraseña modificada correctamente.');
                //await onCerrarSesion();
                OnCancelarClick();


            } else {
                //toastr.error(result)
                Notificacion.error(`Error: ${result.Mensaje}`);
            }
            spinnerModalMostrar(false, '', 3);
        }
    }

    const OnChangeText = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        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);
    }
    const ValidarCampos = () => {
        const _Datos = datos;
        if (_Datos.Usuario_Login.value.trim().length == 0) {
            Notificacion.error('Error: No se ingresaron los datos del login.');
            return false;
        }
        if (_Datos.Usuario_OldPassword.value.trim().length == 0) {
            Notificacion.error('Error: No se ingresaron los datos de la contraseña actual.');
            return false;
        }
        if (_Datos.Usuario_NewPassword.value.trim().length == 0) {
            Notificacion.error('Error: No se ingresaron los datos de la contraseña nueva. ');
            return false;
        }
        if (_Datos.Usuario_NewPassword2.value.trim().length == 0) {
            Notificacion.error('Error: No se ingresaron los datos de la confirmación de contraseña ');
            return false;
        }

        if (_Datos.Usuario_NewPassword.value != _Datos.Usuario_NewPassword2.value) {
            Notificacion.error('Error: La contraseña nueva y la confirmación no coinciden.');
            return false;
        }
        return true;
    }

    return (
        <Fragment>

            <CambiarContrasenaInt
                botones={botones}
                Titulo={'Cambiar Contraseña'}
                Datos={datos}
                OnChangeText={OnChangeText}
            />
            <ModalSpinner
                selectedModal={spinnerModal}
                contentLabel={'spinnerModalProgress'}
                label={spinnerLabel}
                tipoSpinner={spinnerTipo}
            />
        </Fragment>
    );

};
export default withRouter(memo(cambiarContrasena));