import React, {useState, useCallback} from 'react';
import styles from './index.module.css';
import { useHistory } from "react-router-dom";
import { login } from "../../api/api";
const Login = () => {
const [isError, setError] = useState(false);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [redirect, setRedirect] = useState(false);
const [loginResponse, setLoginResponse] = useState('');
const history = useHistory();
const handleEmailChange = useCallback((e) => {
setEmail(e.target.value);
}, [setEmail]);
const handlePasswordChange = useCallback((e) => {
setPassword(e.target.value);
}, [setPassword]);
const onSubmit = (event) => {
event.preventDefault();
login(email, password).then(response => {
setLoginResponse(response);
if (loginResponse.code === 404) {
history.push('/register')
} else if (loginResponse.code === 403) {
setError(true);
} else if(redirect) {
history.push('/')
}else{
setError(false);
setRedirect(true)
}
})
};
return (
<div>
<form onSubmit={onSubmit} method={'post'}>
<h1>Login</h1>
<div className={styles.blockInput}>
<input className={isError ? styles.inputError : null}
onChange={handleEmailChange}
placeholder={'Enter your email'}
type='text'
name='email'
value={email}
/>
<input className={isError ? styles.inputError : null}
onChange={handlePasswordChange}
placeholder={'Enter your password'}
type='password'
name='password'
value={password}
/>
<p className={isError ? styles.error : styles.errorBlock}>
{loginResponse.success}
</p>
</div>
<div>
<button type={"submit"} >Sign in</button>
</div>
</form>
</div>
)
};
export default Login