import React, { useState } from 'react';
import axios from 'axios';
import '../../styles/mobile/Login.scss';
import { useForm } from 'react-hook-form';
import { HeaderAlt } from './Header-Alt.js';
import { useHistory } from 'react-router-dom';
import { ErrorMessage } from './Error-Message.js';

export const Login = () => {
  const { handleSubmit, register, errors, reset } = useForm();
  const baseUrl = 'https://encon-be.herokuapp.com/api';
  // const [loginError, setLoginError] = useState();
  const history = useHistory();

  const onLoginSubmit = (data) => {
    axios
      .post(baseUrl + '/auth/login', {
        email: data.email,
        password: data.password,
      })
      .then((res) => {
        reset();
        localStorage.setItem('AUTH_TOKEN', res.data.token);
        localStorage.setItem('USER_ID', res.data.Data.id);
        localStorage.setItem('USER_NAME', res.data.Data.name);
        localStorage.setItem('USER_LOCATION', res.data.Data.state);
        history.push('/profile');
      })
      .catch((err) => {
        // setLoginError('Login Error: ' + err.response.data.error.message);
      });
  };

  return (
    <div className='login-container'>
      <HeaderAlt />
      <form className='loginForm' onSubmit={handleSubmit(onLoginSubmit)}>
        <label htmlFor='email' className='label'>
          Email
        </label>
        <input
          type='email'
          name='email'
          ref={register({ required: true, pattern: /^\S+@\S+$/i })}
        />
        <ErrorMessage error={errors.email} />
        {errors.email && errors.email.message}
        <label htmlFor='password' className='label'>
          Password
        </label>
        <input
          type='password'
          name='password'
          ref={register({ required: true })}
        />
        <ErrorMessage error={errors.password} />
        <button className='app-buttons' type='submit' data-testid='sign in'>
          Sign In
        </button>
        {/* <div>{loginError}</div> */}
      </form>
    </div>
  );
};