import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { useAuth } from '../../hooks/useAuth';
import './Login.scss';

interface ILogin {
  email: string;
  password: string;
}

export function Login() {
  const [error, setError] = useState('');
  const { giveAuth } = useAuth();
  const navigate = useNavigate();
  const { register, handleSubmit } = useForm<ILogin>({mode: 'onChange'});

  const onSubmit = (formValue: ILogin) => {
    setError('TODO: remove me once actual errors are implemented');
    console.log('ready to make login api call', formValue);
    giveAuth();
    navigate('/');
  };

  return (
    <>
      <div className='login'>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className='card login-card'>
            <div className='form-group'>
              <label>Email Address</label>
              <input type='email' placeholder='Enter email' {...register('email', { required: true })} />
            </div>

            <div className='form-group'>
              <label>Password</label>
              <input type='password' placeholder='Enter password' {...register('password', { required: true })} />
            </div>

            <div className='form-group'>
              <button type='submit'>Submit</button>
            </div>

            <div className='form-group'>
              {error && <span>{error}</span>}
            </div>
          </div>
        </form>
      </div>
    </>
  );  
}

export default Login;