/* eslint-disable react/no-multi-comp */
import React, {useState} from 'react';

import DialogTitle from '@material-ui/core/DialogTitle';
import Dialog from '@material-ui/core/Dialog';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

const LoginDialog = props => {
  	const { classes, onClose, open, globalUrl, isLoggedIn, setIsLoggedIn, ...other } = props;

  	const [username, setUsername] = useState("");
  	const [password, setPassword] = useState("");
  	//const [selectedValue, setSelectedValue] = useState(false);

  	// Used to swap from login to register. True = login, false = register
  	const [loginCheck, setLoginCheck] = useState(true);

	// Error messages etc
	const [loginInfo, setLoginInfo] = useState("");

	const handleValidateForm = () => {
		return (username.length > 1 && password.length > 8);
	}

	const onSubmit = (e) => {
		e.preventDefault()

		// Just use this one?
		var data = '{"username": "' + username + '", "password": "' + password + '"}';
		var baseurl = globalUrl
		if (loginCheck) {
			var url = baseurl+'/login';
			fetch(url, {
				method: 'POST',
				body: data,
				headers: {
					'Content-Type': 'application/json',
				},
			})
			.then(response =>
				response.json().then(responseJson => {
					console.log(responseJson)
					//console.log(e)
					if (responseJson["success"] === false) {
						setLoginInfo(responseJson["reason"])
					} else {
						setLoginInfo("Successful login :)")
						onClose()
						setIsLoggedIn(true)
					}
				}),
			)
			.catch(error => {
				setLoginInfo("Error in userdata")
			});
		} else {
			url = baseurl+'/register';
			fetch(url, {
				method: 'POST',
				body: data,
				headers: {
					'Content-Type': 'application/json',
				},
			})
			.then(response =>
				response.json().then(responseJson => {
					if (responseJson["success"] === false) {
						setLoginInfo(responseJson["reason"])
					} else {
						setLoginInfo("Successful register :)")
						onClose()
						setIsLoggedIn(true)
					}
				}),
			)
			.catch(error => {
				setLoginInfo("Error in userdata")
			});
		}
	}

	const onChangeUser = (e) => {
		setUsername(e.target.value)	
	}

	const onChangePass = (e) => {
		setPassword(e.target.value)	
	}

	const onClickRegister = () => {
		setLoginCheck(!loginCheck)
	}

	//var loginChange = loginCheck ? (<div><p onClick={setLoginCheck(false)}>Want to register? Click here.</p></div>) : (<div><p onClick={setLoginCheck(true)}>Go back to login? Click here.</p></div>);
	var formtitle = loginCheck ? <div>Login</div> : <div>Register</div>
	var formButton = loginCheck ? <div>Click to Register</div> : <div>Click to Login</div>

	return (
		<Dialog modal open={open} onClose={onClose} {...other}>
			<DialogTitle>{formtitle}</DialogTitle>
      <form onSubmit={onSubmit} style={{margin: "15px 15px 15px 15px"}}>
			Username
			<div>
				<TextField
					required
				  id="standard-required"
					autoComplete="username"
					margin="normal"
					variant="outlined"
      	 	onChange={onChangeUser}
				/>
			</div>
			Password	
			<div>
				<TextField
					id="outlined-password-input"
					type="password"
					autoComplete="current-password"
					margin="normal"
					variant="outlined"
      	 	onChange={onChangePass}
				/>
			</div>
			<div style={{display: "flex", marginTop: "15px"}}>
				<Button color="secondary" variant="contained" type="submit" style={{flex: "1", marginRight: "5px"}} disabled={!handleValidateForm()}>SUBMIT</Button> 				
				
				<Button color="primary" variant="contained" type="button" style={{flex: "1"}} onClick={onClose}>Cancel</Button> 				
			</div>
			{loginInfo}
			</form>
			<div style={{display: "flex"}}>
				<Button color="secondary" variant="contained" onClick={onClickRegister} type="button" style={{flex: "1"}}>{formButton}</Button> 				
			</div>
		</Dialog>
	);
}

export default LoginDialog;