import { ChangeEvent, useState } from 'react';
import useLogin from '../../api/hooks/useLogin';
import useLogout from '../../api/hooks/useLogout';
import { useLocation, useNavigate } from 'react-router-dom';
import useUser from '../../api/hooks/useUser';
import { useQuery } from 'react-query';

export default function LoginComponent() {
	const { getUser } = useUser();
	// const { getUser: getUserFromStore } = useUser();
	// const getUser = () =>{
	// 	if (user == null){
	// 		console.log('login component useeffect');
	// 		const loadedUser = getUserFromStore();
	// 		if (loadedUser != null){
	// 			return Promise.resolve(loadedUser);
	// 		}
	// 		else {
	// 			return Promise.reject();
	// 		}
	// 	}
	// 	else{
	// 		return Promise.resolve(user);
	// 	}
	// };
	// const { userData } = useQuery('user', getUser);
	const { data: user } = useQuery('user', getUser);
	const { login: doLogin , canLogin } = useLogin();
	const { logout } = useLogout();

	const navigate = useNavigate();
	const location = useLocation();
	const from = location.state?.from?.pathname || '/';
	
	const [ login, setLogin ] = useState<string>('');
	const onLoginChange = (event : ChangeEvent<HTMLInputElement>) => setLogin(event.target.value);
	
	const [ password, setPassword ] = useState<string>('');
	const onPasswordChange = (event : ChangeEvent<HTMLInputElement>) => setPassword(event.target.value);

	const clearForm = () => { setLogin(''); setPassword(''); }
	
	return (
		<div>
			{/* https://localhost:7189/User/Avatar?fileName=avatar_e3b9d5c8-37d2-4a42-868c-30119e4cfba7.png
			<br/>
			<img className="mb-4" src="https://localhost:7189/User/Avatar?fileName=avatar_e3b9d5c8-37d2-4a42-868c-30119e4cfba7.png" alt="" width="72" height="57"/> */}
			{/* User: {user == null ? "NULL" : JSON.stringify(user)} */}
			<br/>
			accessToken: {user?.accessToken == null ? "NULL" : user?.accessToken}
			{/* User: {user1 == null ? "NULL" : JSON.stringify(user1)} */}
			{/* <img className="mb-4" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"/> */}
			<div className='mb-3 form-floating'>
				<input type="email" className="form-control" id="loginValue" placeholder="name@example.com" onChange={onLoginChange} value={login}  />
				<label htmlFor="loginValue">Email address</label>
			</div>

			<div className='mb-3 form-floating'>
				<input type="password" className="form-control" id="passwordValue" placeholder="Password" onChange={onPasswordChange} value={password}/>
				<label htmlFor="passwordValue">Password</label>
			</div>

			{/* <div className="checkbox mb-3">
			<label>
				<input type="checkbox" value="remember-me" /> Remember me
			</label>
			</div> */}
			<hr />
			{user == null &&
				<button className={'w-100 btn btn-sm btn-lg btn-primary' + (!canLogin(login, password) ? ' disabled' : '')} type="button" onClick={() => doLogin(login, password).then(() => {
					clearForm();
					// console.log('redirect');
					navigate(from, { replace: true });
				})}>Войти</button>
			}
			{user != null &&
				<div className="input-group mb-3">
					<button className={'btn btn-sm btn-lg btn-primary form-control' + (!canLogin(login, password) ? ' disabled' : '')} type="button" onClick={() => doLogin(login, password).then(() => {
						clearForm();
						// console.log('redirect');
						navigate(from, { replace: true });
					})}>Войти</button>
					<span className='mx-4'></span>
					<button className={'btn btn-sm btn-lg btn-outline-primary form-control' + (user == null ? ' disabled' : '')} type="button" onClick={() => logout().then(() => clearForm) }>Выйти</button>
				</div>
			}

			{/* <button className={'w-100 btn btn-sm btn-lg btn-primary' + (!canLogin(login, password) ? ' disabled' : '')} type="button" onClick={() => doLogin(login, password).then(() => {
				clearForm();
				console.log('redirect');
				navigate(from, { replace: true });
			})}>Войти</button> */}
			
		</div>
	)
}
