import React, { useState } from 'react';
import '../styles/login.css';
import { NavLink, useNavigate } from 'react-router-dom';
import axios from 'axios';

function Login() {
  const [cargando, setCargando] = useState(false);
  const [datosUsuario, setDatosUsuario] = useState({
    matricula: "",
    contrasena: "",
  });
  const [usuario, setUsuario] = useState({
    id: 0,
    nombre: "",
    contrasena: "",
    correo: "",
  });

  const navigate = useNavigate(); // Usa el hook useNavigate para la navegación programática

  const limpiar = () => {
    setDatosUsuario({
      matricula: "",
      contrasena: "",
    });
  };

  const hacerPeticion = async () => {
    try {
      const res = await axios.post(
        "http://localhost:4567/usuarioValido",
        datosUsuario
      );
      return res.data;
    } catch (error) {
      throw error;
    }
  };

  const obtenerUsuario = async () => {
    try {
      const res = await axios.get(
        `http://localhost:4567/alumnoIniciado?matricula=${datosUsuario.matricula}&contrasena=${datosUsuario.contrasena}`
      );
      return res.data;
    } catch (error) {
      throw error;
    }
  };

  const procesarFormulario = async (e) => {
    e.preventDefault();
    setCargando(true);

    try {
      const res = await hacerPeticion();
      setCargando(false);

      if (res.existe) {
        const aux = await obtenerUsuario();
        setUsuario({
          id: aux.id,
          nombre: aux.nombre,
          contrasena: aux.contrasena,
          correo: aux.correo,
        });
        alert("¡Bienvenido! " + aux.nombre);
        limpiar();

        // Navega a la página objetivo después del inicio de sesión exitoso, pasando parámetros si es necesario
        navigate(`/home/${aux.id}/${aux.nombre}`);
      } else {
        alert("Usuario No encontrado");
      }
    } catch (error) {
      console.log(error);
      setCargando(false);
    }
  };

  const cambiosUsuario = (e) => {
    const { name, value } = e.target;
    setDatosUsuario({
      ...datosUsuario,
      [name]: value,
    });
  };

  return (
  <>
    <body>
    <header className='encabezado'>La universidad que esta para ti, ¡UNETE!</header>
      <div className='gridContainer'>
        <div className='imgColum'>
          <img src="imagen.jpg" alt='Imagen'/>
        </div>
        <div className='loginColum'>
        <h1 className='bienvenida'>Bienvenido</h1>
        <form className='Formulario'>
        <input
                type="text"
                id="usuario"
                onChange={cambiosUsuario}
                value={datosUsuario.matricula}
                name="matricula"
              />
              <label>Contraseña:</label>
              <input
                type="password"
                id="password"
                onChange={cambiosUsuario}
                value={datosUsuario.contrasena}
                name="contrasena"
              />
              <NavLink to="/registro">¿Aún no te has registrado?</NavLink>
              <button
                id="button"
                type="submit"
                disabled={cargando}
                onClick={procesarFormulario}
              >
                Iniciar sesión
              </button>
        </form>
        </div>
      </div>
      
      <footer>  
          <div id="footerId"><a id="pie" href=''>uniregistro@outlook.com</a></div>
          <div id="footerId"><a id="pie" href=''>uniBandeVer</a></div>
          <div id="footerId"><a id ="pie" href=''>4582349234</a></div>     
    </footer>  
    </body>
  </>
  );
}

export default Login

