import { ChangeEvent, useState } from 'react';
import useRegister from '../../api/hooks/useRegister';

export interface ILoginComponentProps{
	onAfterRegister?: () => void | null
}

export default function LoginComponent(props: ILoginComponentProps) {
	const { register , canRegister } = useRegister();
	
	const [ nickname, setNickname ] = useState<string>('');
	const onNicknameChange = (event : ChangeEvent<HTMLInputElement>) => setNickname(event.target.value);
	
	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>
	// 		<form>
	// 			<img className="mb-4" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"/>
	// 			<h1 className="h3 mb-3 fw-normal">Please register</h1>

				
	// 			<div className="form-floating">
	// 			<input type="text" className="form-control" id="floatingNicknameInput" placeholder="user" onChange={onNicknameChange} value={nickname} />
	// 			<label htmlFor="floatingNicknameInput">Nickname</label>
	// 			</div>

	// 			<div className="form-floating">
	// 			<input type="email" className="form-control" id="floatingEmailInput" placeholder="name@example.com" onChange={onLoginChange} value={login} />
	// 			<label htmlFor="floatingEmailInput">Email address</label>
	// 			</div>

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

	// 			<button className={'w-100 btn btn-lg btn-primary' + (!canRegister(nickname, login, password) ? ' disabled' : '')} type="submit"
	// 			onClick={() => register(nickname, login, password)
	// 				.then(() => {
	// 					try{
	// 						props.onAfterRegister?.();
	// 					clearForm();
	// 					}
	// 					catch (exc) {
	// 						console.log('exception:');
	// 						console.log(exc);
	// 					}
	// 				})}>
	// 					Register
	// 			</button>
	// 			{/* <button className={'w-100 btn btn-lg btn-primary' + (user == null ? ' disabled' : '')} type="submit" onClick={() => logout().then(() =>  clearForm) }>Login</button> */}
	// 			<button className={'w-100 btn btn-lg btn-primary' + (user == null ? ' disabled' : '')} type="button" onClick={() => logout().then(() =>  clearForm) }>Login</button>
	// 		</form>
	// 	</div>
	// )

	return (
		<div>

			<div className='mb-3 form-floating'>
				<input type="email" className="form-control" id="registerNicknameValue" required={true} placeholder="User" onChange={onNicknameChange} value={nickname}  />
				<label htmlFor="registerNicknameValue">Nickname</label>
			</div>

			<div className='mb-3 form-floating'>
				<input type="email" className="form-control" id="registerLoginValue" required={true} placeholder="name@example.com" onChange={onLoginChange} value={login}  />
				<label htmlFor="registerLoginValue">Email address</label>
			</div>

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

			<button className={'w-100 btn btn-sm btn-lg btn-primary' + (!canRegister(nickname, login, password) ? ' disabled' : '')} type="submit"
				onClick={() => register(nickname, login, password)
					.then(() => {
						try{
							props.onAfterRegister?.();
						clearForm();
						}
						catch (exc) {
							console.log('exception:');
							console.log(exc);
						}
					})}>
					Register
			</button>
		</div>
	)
}
