import {useState} from 'react';

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

export default function Register()
	
	// it should always be set and the name of our function
	const [firstName, setFirstName] = useState('');
	const [lastName, setFirstName] = useState('');
	const [email, setEmail] = useState('');
	const [mobileNo, setMobileNo] = useState('');
	const [password, setPassword] = useState('');
	const [confirmPassword, setConfirmPassword] = useState('');
	const [isActive, setIsActive] = useState('false');
	// Check if values are successfully binded
	console.log(firstName);
	console.log(lastName);
	console.log(email);
	console.log(mobileNo);
	console.log(password);
	console.log(confirmPassword);

	// HAndler function for registering our user
	function registerUser(e){
		// preventDefault- prevent page refresh everytime we submit a form
			e.preventDefault();

			// fetch - to access or API
			// this url will connect us to our db, the url coming from the postman
			fetch('http://localhost:4000/users/register'),
			{
				method: 'POST',
				headers:{
					'Content-Type': 'application/json'
				},
				// JSON.stringyfy - 
				convert our javascript object into json
				body: JSON.stringify({

					firstName;firstName,
					lastName;lastName,
					email;email,
					mobileNo;mobileNo,
					password;password,
					confirmPassword:confirmPassword


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

			if(data){

				setFirstName("");
				setLastName("");
				setEmail("");
				setMobileNo("");
				setPassword("");
				setConfirmPassword("");

				alert("Thank you for registering");
			} else {
				alert("Please try again later.")
			}
		})
	}

	// for creating a side effect, detects if there is changes and if it detects the changes it will execute our function.
	useEffect(() => {
		// Check if the fields are filled properly, checks if the password matches the confirm password, and checks if the length of mobileNo is 11.
		if(
			(firstName !== "" &&
			lastName !== "" &&
			email !== "" &&
			mobileNo !== "" &&
			password !== "" &&
			confirmPassword !== "") &&
			(password === confirPassword) &&
			(mobileNo.length === 11)
		) {
			// if you have filled all the fields that meets the condition of our if statements it will make the button blue,while it will make the button red if it did not meet the condition. 
			setIsActive(true);
		} else {
			setIsActive(false);
		}
		// Dependency Array- siya ang magbabantay kung merong changes sa ating set at e execute niya yung useeffect na function.
	}, [firstName, lastName, email, mobileNo, password, confirmPassword]);
return (

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

		<Form.Group>
			<Form.Label>First Name:</Form.Label>
			<Form.Control
			type = 'text' 
			placeholder = 'Enter First Name'
			 required 
			 value={firstName}
			 // if there will be change in our Form this will execute this function  
				// value = contain the value of our form
			 //e.target.value = value where we can get what the user input our form.
			 // e means event /purpose os to capture live event
			 onChange= {e => {setFirstName(e.target.value)}}

			 />
		</Form.Group>
		<Form.Group>
			<Form.Label>Last Name:</Form.Label>
			<Form.Control 
			type = 'text' 
			placeholder = 'Enter Last Name' 
			required 
			value={LastName}
			onChange= {e => {setLastName(e.target.value)}}
			/>
		</Form.Group>
		<Form.Group>
			<Form.Label>Email:</Form.Label>
			<Form.Control 
			type = 'email' 
			placeholder = 'Enter Email' 
			required 
			value={Email}
			onChange= {e => {setEmail(e.target.value)}}
			/>
		</Form.Group>
		<Form.Group>
			<Form.Label>Mobile No:</Form.Label>
			<Form.Control 
			type = 'number' 
			placeholder = 'Enter Mobile No' 
			required 
			value={mobileNo}
			onChange= {e => {setMobileNo(e.target.value)}}
			/>
		</Form.Group>
		<Form.Group>
			<Form.Label>Password:</Form.Label>
			<Form.Control 
			type = 'password' 
			placeholder = 'Enter Password' 
			required 
			value={password}
			onChange= {e => {setPassword(e.target.value)}}
			/>
		</Form.Group>
		<Form.Group>
			<Form.Label>Confirm Password:</Form.Label>
			<Form.Control 
			type = 'password' 
			placeholder = 'Confirm Password' 
			required 
			value={confirmpassword}
			onChange= {e => {setConfirmPassword(e.target.value)}}
			/>
		</Form.Group>
		
		// 
		// 3nanry operator = short hand of if, else statement(?)
		// ? means if
		// : means else 
		// checks if isActive is true or false
		{
			isActive ?
		<Button variant = 'primary' type ='submit'>Submit</Button>
		:
		<Button variant = 'danger' type ='submit'>Submit</Button>
		// or <Button variant={isActive ? "primary" : "danger"} type="submit">Submit</Button>

		}
		</Form>

			)