import {Form,Button} from 'react-bootstrap';

export default function loginUSer()

const [email,setEmail] = useState('');
const [password,setPassword]= useState('');
const [isActive,setIsActive]= useState('false');

function loginUSer(e){

	e.preventDefault()

	fetch(),{

		method:"POST",
		header:{
			"Content-type":"application/json"
		},
	} body:JSON.stringify({

			email:email,
			password:password

	});

	.then(res => res.json())
	.then(data =>{
		console.log(data);
			if(data){

				setEmail("");
				setPassword("");
				

				alert("You are now logged in");
			} else {
				alert("Please try again later.")
			}
		})
	}


	useEffect(() =>{

		if(

			(setEmail!== ''&&
			 password !== "" &&
			){
				setIsActive(true);
		} else {
			setIsActive(false);
		}
		// Dependency Array- siya ang magbabantay kung merong changes sa ating set at e execute niya yung useeffect na function.
	}, [email, password,]);


return(

		<Form onSubmit={(e) => loginUSer(e)}>

		<Form.Group>
			<Form.Label>Email:</Form.Label>
			<Form.Control
			type = 'email' 
			placeholder= 'Type your Email' 
			required
			value = {email}
			onChange= {e => {setEmail(e.target.value)}}
			/>
		<Form.Group>
		<Form.Label>Password</Form Label>
		<Form.Control 
		type="password"
		placeholder=" Type your Password"
		required
		value={password}
		onChange= {e => {setPassword(e.target.value)}}

		/>
		{ isActive ?
		<Button variant = 'primary' type='submit'>Login</Button
		:
		<Button variant = 'success' type = 'submit' disabled>Login</button
		}
	</Form>

	)