import React, { memo, useEffect, useState, Fragment } from 'react';
import { SiteRutas, ImagenesRutas } from '../../request/RutasConfig.jsx';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faReply, faSave, faGlobeAmericas, faEnvelope  } from '@fortawesome/free-solid-svg-icons';
import { useHistory } from 'react-router-dom';
import useInput from '../../components/Util/Hooks/useInput.jsx';
import { Notificacion } from '../../components/Util/Notificacion/Notificacion.jsx';
import { Ingreso_Request, Ingreso_Token_Request } from '../../request/LoginRequest.jsx';
import { useSessionStorage } from '../../components/Util/Hooks/useSessionStorage.jsx';
import ModalCambiarContrasena from './ModalCambiarContrasena.jsx';
import { Cambiar_Contrasena_Request } from "../../request/LoginRequest.jsx";
import Config from '../../components/Util/constantes.js';

//utilitarios
import ModalSpinner from '../../components/UI/modalSpinner/modalSpinner.jsx';

function LoginPage(props) {
  let history = useHistory();
  const [pais, setPais] = useSessionStorage('paisCON', '');
  const [id, setId] = useSessionStorage('idCON', '');
  const [imageUrl, setImageUrl] = useSessionStorage('imageUrlCON', '');
  const [llave, setLlave] = useSessionStorage('llaveCON', '');
  const [usuario, setUsuario] = useSessionStorage('usuarioCON', '');
  const [usuarioNombre, setUsuarioNombre] = useSessionStorage('usuarioNombreCON', '');
  const [rollId, setRollId] = useSessionStorage('rollIdCON', '');
  const [token, setToken] = useSessionStorage('tokenCON', '');
  const [imagenUsuario, setImagenUsuario] = useSessionStorage('ImagenUsuarioCON', '');
  const [usuarioS, setUsuarioS] = useSessionStorage('UsuarioSCON', '');
  const _modulo = Config.Modulo;

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

  //modal
  const [datos, setDatos] = useState(DatosConst);
  const [selectModalBen, setSelectModaBen] = useState(undefined);

  const botonesMod = [
    {
      name: "btnHomeCCM",
      clase: "btn btn-sm pull-right flipInX animated",
      evento: () => cerrarModal(),
      leyenda: "",
      iclase: faReply,
      tooltip: "Cancelar"
    }
    , {
      name: "btnGuardarCCM",
      clase: "btn btn-sm pull-right flipInX animated",
      evento: () => OnGuardarClick(),
      leyenda: "",
      iclase: faSave,
      tooltip: "Guardar"
    }
  ]
  const [spinnerModal, setSpinnerModal] = useState(undefined);
  const [spinnerLabel, setSpinnerLabel] = useState('');
  const [spinnerTipo, setSpinnerTipo] = useState(1);
  const onClickBtnLogin = event => {
    event.preventDefault();
    history.push(SiteRutas.Asientos);
  }

  useEffect(() => {
    let _Params = new URLSearchParams(window.location.search);
    let _Token = _Params.get('token');
    _Token = (_Token == null) ? '' : (_Token == undefined) ? '' : _Token;
    document.body.style.background = `url(${ImagenesRutas.Main_LD}) no-repeat center center fixed`;
    const cargaToken = async () => { await onLoginToken(_Token) }
    cargaToken()
  }

    , [])
  const [password, passwordBind, passwordReset] = useInput('');
  const [user, useBind, useReset] = useInput('');

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

  const onKeypress = (e) => {
    if (e.which == 13 || e.keyCode == 13) {
      onLogin();
    }
  }
  const setDatosGenerales = (pDatos) => {
    setPais(pDatos.GenPaisModulo);
    setId(pDatos.Id);
    setImageUrl(pDatos.Imagen_Url);
    setLlave(pDatos.Llave);
    setUsuario(pDatos.Login);
    setUsuarioNombre(pDatos.Nombre);
    setRollId(pDatos.Rol_Id);
    setToken(pDatos.Token);
    setImagenUsuario(pDatos.ImagenUsuario);
    setUsuarioS(pDatos.Id)
    let _Datos = { ...datos };
    _Datos.Usuario_Login.value = pDatos.Login;
    _Datos.Usuario.value = pDatos.Login;
    setDatos(_Datos);

  }

  const setDatosCambioPws = (pDatos) => {
    setToken(pDatos.Token);
    let _Datos = { ...datos };
    _Datos.Usuario_Login.value = pDatos.Login;
    _Datos.Usuario.value = pDatos.Nombre;
    setDatos(_Datos);

  }
  const onLogin = async (e) => {
    if (user === '' || password === '') {
      Notificacion.warning("", 'Faltan datos para poder continuar con el proceso.');
    } else {

      // Notificacion.info('', `Usuario: ${user} Password: ${password}`);
      const response = await Ingreso_Request(user, password, _modulo);
      if (response.Exitoso) {
        useReset();
        passwordReset();
        if (response.Datos.CambiarPsw == true) {
          Notificacion.error('Contraseña expiró.');
          setDatosCambioPws(response.Datos);
          onCAmbiarContrasena();
        } else {
          Notificacion.success("", "Se ha iniciado sesión.");
          setDatosGenerales(response.Datos); //guardar datos en alguna variable global y que no se resetee cuando se de el F5
          props.history.push(SiteRutas.Asientos);
        }
      }
      else {
        Notificacion.error(response.Mensaje);
        console.log(`response.Datos:  ${JSON.stringify(response)}`);
      }



      // if (result.Usuario !== undefined) {
      //   const session = new Session();
      //   const usuario = result.Usuario;
      //   session.set('Usuario', usuario);
      //   session.set('UsuarioId', result.Login);
      //   session.set('tmpUsuarioId', result.Login);
      //   // const WSAdminFiles = result.WSAdminFiles;
      //   // session.set('WSAdminFiles', WSAdminFiles);
      //   this.verificarParametros();
      // }
      // else {
      //   if (result.indexOf('bloqueada') !== -1 || result.indexOf('desabilitada') !== -1) {
      //     Error({ text: 'Error: ' + result, progress: Progress });
      //   } else
      //     if (result.indexOf('expiro') !== -1 || result.indexOf('cambiar') !== -1) {
      //       Error({ text: 'Error: ' + result, progress: Progress });
      //       //this.props.history.replace(`${LoginRoutes.CambiarContrasena}`);
      //     } else
      //       if (result.indexOf('permiso') !== -1) {
      //         Error({ text: 'Error: ' + result, progress: Progress });
      //       } else {
      //         Error({ text: 'Error: ' + result, progress: Progress });

      //       }

      // }
    }

  }

  const onLoginToken = async (pToken) => {
    if (pToken.length > 0) {
      spinnerModalMostrar(true, '', 3);
      let response = '';
      response = await Ingreso_Token_Request(pToken, _modulo);
      console.log(`onLoginToken verificacion datos: ${JSON.stringify(response.Datos)}`);
      if (response.Exitoso) {
        useReset();
        passwordReset();
        if (response.Datos.CambiarPsw == true) {
          Notificacion.error('Contraseña expiró.');
          setDatosCambioPws(response.Datos);
          onCAmbiarContrasena();
        } else {
          Notificacion.success("", "Se ha iniciado sesión.");
          setDatosGenerales(response.Datos); //guardar datos en alguna variable global y que no se resetee cuando se de el F5
          spinnerModalMostrar(false, '', 3);
          props.history.push(SiteRutas.Asientos);
        }
      }
      else {
        // Notificacion.error(response.Mensaje);
        //console.log(`response.Datos:  ${JSON.stringify(response)}`);
        spinnerModalMostrar(false, '', 3);
      }
    }
    spinnerModalMostrar(false, '', 3);
  }
  const onCAmbiarContrasena = () => {
    handleModal();
    //props.history.push(`${SiteRutas.CambiarContrasena}/1`);
    //console.log(`aqui va abrir la pantalla de onctraseña`);
  }
  //Modal

  const cerrarModal = () => {
    spinnerModalMostrar(false, '', 3);
    setSelectModaBen(undefined);
    setToken('');
    let _Datos = { ...datos };
    _Datos.Usuario_Login.value = '';
    _Datos.Usuario.value = '';
    _Datos.Usuario_OldPassword.value = '';
    _Datos.Usuario_NewPassword.value = '';
    _Datos.Usuario_NewPassword2.value = '';
    setDatos(_Datos);
  }

  const OnGuardarClick = async () => {

    if (ValidarCampos()) {
      const _Datos = datos;
      spinnerModalMostrar(true, 'Cambio contraseña ...', 3);
      console.log(`token: ${token}, _Datos.Usuario_Login.value: ${_Datos.Usuario_Login.value}, _Datos.Usuario_OldPassword.value: ${_Datos.Usuario_OldPassword.value}, _Datos.Usuario_NewPassword.value: ${_Datos.Usuario_NewPassword.value}, _Datos.Usuario_NewPassword2.value: ${_Datos.Usuario_NewPassword2.value}`)
      debugger;
      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.');
        spinnerModalMostrar(false, '', 3);
        //await onCerrarSesion();
        cerrarModal();


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

  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;
  }
  const handleModal = () => {
    setSelectModaBen(true);
  }

  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 appVersion = document.getElementById('appVersion').value;

  return (
    <Fragment>

      <div className='login-bg login'>
        <div className='row'>
          <div className="col-md-8 col-sm-12 col-md-offset-2 text-center">
            <img src={ImagenesRutas.Logo_Fas} />
            <p className="title">Contabilidad</p>

          </div>
          <div className="row">
            <div className="col-md-8 col-sm-12 col-md-offset-2">
              <input type="text" className="login" id="user" placeholder="Usuario" onKeyPress={onKeypress} maxLength={30} {...useBind} />
              <input type="password" className="login" id="password" placeholder="Contraseña" onKeyPress={onKeypress} maxLength={100}  {...passwordBind} />
            </div>
          </div>
          <div className="row">
            <div className="col-md-8 col-sm-12 col-md-offset-2 text-center">
              <button className="btn btn-iniciar" id="btn-iniciar" onClick={onLogin}> Iniciar Sesión<i className="fa fa-long-arrow-right"></i></button>
            </div>
          </div>
        </div>
        <div className="version">
          <p> Desarrollado por: Logical Data, CR. Versión: {appVersion} | Todos los Derechos Reservados
            |  Contáctenos: <FontAwesomeIcon icon={faGlobeAmericas} /> <a href="http://www.ld.co.cr/" title="">  http://www.ld.co.cr/ </a>
            | <FontAwesomeIcon icon={faEnvelope} /> <a href="mailto:info@ld.co.cr">info@ld.co.cr</a>&nbsp;
            | <i className="clip-phone-4"></i> +(506) 4052-2780</p>
        </div>
      </div>
      <ModalCambiarContrasena
        show={selectModalBen}
        botones={botonesMod}
        Titulo={'Cambiar Contraseña'}
        Datos={datos}
        OnChangeText={OnChangeText}
        cerrarModal={cerrarModal}
      />
      <ModalSpinner
        selectedModal={spinnerModal}
        contentLabel={'spinnerModalProgress'}
        label={spinnerLabel}
        tipoSpinner={spinnerTipo}
      />
    </Fragment>

  );
};
export default memo(LoginPage)