import React, { useState } from 'react';
import './LoginForm.css';
import { redirect } from 'react-router-dom';
import axios from "axios";
import { useNavigate } from "react-router-dom";

function LoginForm(props) {
  const navigate = useNavigate();

  const [Cargando, setCargando] = useState(false)
  const [datosFormulario, setDatosFormulario] = useState({
      correo: '',
      password: ''
  })

  const [loginVisible, setLoginVisible] = useState(true);
  const [registerVisible, setRegisterVisible] = useState(false);
  const [passwordVisible, setPasswordVisible] = useState(false);

  const redirectToRegister = () => {
    navigate("/Registro");
  };

  const redirectToRecuperarContra = () => {
    navigate("/RecuperarContraseña");
  };

  const mostrarAlertaLoginExitoso=(nomb)=>{
    swal({
      title: "Inicio de sesion Exitoso",
      text: "Bienvenido "+nomb+".",
      icon: "success",
      button: "Aceptar"

    }).then(respuesta=>{
        if(respuesta){
            redirectToHome();
        }
        
    })
  }

  const mostrarAlertaLoginFallido=()=>{
    swal({
      title: "Inicio de sesion fallido",
      text: "Usuario o Contraseña Incorrecta.",
      icon: "error",
      button: "Aceptar"

    });
  }

  const mostrarAlertaLoginSinDatos=()=>{
    swal({
      title: "Inicio de sesion fallido",
      text: "Introduzca los datos que se le piden.",
      icon: "error",
      button: "Aceptar"

    });
  }

const loginUsuario = async (evento) => {
    evento.preventDefault();
    try{
        const response = await axios.post('http://localhost:4567/frontend/login',{datosFormulario})
        console.log(response.data)
        console.log("c = " +datosFormulario.correo+" p = "+datosFormulario.password)
        if(datosFormulario.correo && datosFormulario.password){
            if (response.data === 'Invalido') {
                // Si la respuesta es 'Invalido', limpiar los campos del formulario
                mostrarAlertaLoginFallido();
                setDatosFormulario({
                    correo: '',
                    password: ''
                });    
    
            } else {
    
                // Si la respuesta es 'Valido', puedes realizar las acciones deseadas
                setNombre(response.data.nombre);
                console.log(response.data.nombre);
                mostrarAlertaLoginExitoso(response.data.nombre);
                //abrirPopupV()
                
            }


        }else{
            
            mostrarAlertaLoginSinDatos();
        }

        return response.data
    } catch(error){
        throw error
    }
}

const [nombre,setNombre]=useState('')

const [mostrarPopupV, setMostrarPopupV] = useState(false);
const abrirPopupV = () => {
    setMostrarPopupV(true);
};

const [mostrarPopupIv, setMostrarPopupIv] = useState(false);
const abrirPopupIv = () => {
    setMostrarPopupIv(true);
};

const cambiosFormulario = (evento) => {
    //console.log(evento.target)
    const {name,value} = evento.target
    setDatosFormulario ({...datosFormulario, [name]: value})

    setMostrarPopupIv(false);
}
 
  return (
    <>
      <body className='body-login'>
        <div className="wrapper">
          <div className="form-box">  
            <div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
              <form>  
                <div className="top">
                  <span>No tienes cuenta? <a href="" onClick={redirectToRegister}>Registrate</a></span>
                  <header className='header-login'>Inicia Sesión</header>
                </div>
                <div className="input-box">
                  <input type="text" className="input-field" placeholder="Correo" />
                  <i className="bx bx-user"></i>
                </div>
                <div className="input-box">
                  <input type="password" className="input-field" placeholder="Contraseña" />
                  <i className="bx bx-lock-alt"></i>
                </div>
                <div className="input-box">
                  {/*<input type="submit" className="submit" value="Entrar" />*/}
                  <button type="button" className="submit">Entrar</button>
                </div>
                <div className="two-col">
                  <div className="one">
                    <input type="checkbox" id="login-check" />
                    <label htmlFor="login-check"> Recuerdame</label>
                  </div>
                  <div className="two">
                    <span><a href="" onClick={redirectToRecuperarContra}>Olvidaste la contraseña?</a></span>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </body>
    </>
  );
}

export default LoginForm;