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.post(
        "http://localhost:4567/alumnoIniciado",
        datosUsuario
      );
      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}`); // Suponiendo que la página objetivo es '/home'
      } 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 (
  <>
    <div>
        <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>Bienvenido</h1>
            <form className='Formulario'>
              <label id='usuario'>Matricula:</label>
              <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 className="footerId"><a href=''>uniregistro@outlook.com</a></div>
          <div className="footerId"><a href=''>uniBandeVer</a></div>
          <div className="footerId"><a href=''>4582349234</a></div>     
    </footer>  
    </div>
  </>
  );
}

export default Login