import React, {useState, useEffect} from 'react';

import Paper from '@material-ui/core/Paper';

const bodyDivStyle = {
	margin: "auto",
	textAlign: "center",
	width: "768px",
}


//const tmpdata = {
//	"username": "frikky",
//	"firstname": "fred",
//	"lastname": "ode",
//	"title": "topkek",
//	"companyname": "company here",
//	"email": "your email pls",
//	"phone": "PHONE!!",
//}

// FIXME - add fetch for data fields
// FIXME - remove tmpdata
// FIXME: Use isLoggedIn :)
const Settings = (props) => {
  	const { globalUrl, isLoaded, surfaceColor, } = props;

  	const [firstRequest, setFirstRequest] = useState(true);
	const boxStyle = {
		flex: "1",
		marginLeft: "10px",
		marginRight: "10px",
		paddingLeft: "30px",
		paddingRight: "30px",
		paddingBottom: "30px",
		paddingTop: "30px",
		backgroundColor: surfaceColor,
		color: "white",
		display: "flex", 
		flexDirection: "column"
	}

	const registerCall = () => {
		const url = globalUrl+'/api/v1/register/'+props.match.params.key
		fetch(url, {
			method: 'GET',
			credentials: 'include',
			headers: {
				'Content-Type': 'application/json; charset=utf-8',
			},
		})
		.then(response =>
			response.json().then(responseJson => {
				console.log(responseJson)
			}),
		)
		.catch(error => {
			console.log("SOMETHING WRONG")
		});
	}

	// This should "always" have data
	useEffect(() => {
		if (firstRequest) {
			setFirstRequest(false)
			registerCall()	
		}
	})

	// Random names for type & autoComplete. Didn't research :^)
	const landingpageData = 
			<div style={{display: "flex", marginTop: "80px"}}>
				<Paper style={boxStyle}>
				<h2>Registration verification</h2>
				<p>Thanks for verifying, redirecting you to our login!</p>
			</Paper>
		</div>

const loadedCheck = isLoaded ? 
	<div style={bodyDivStyle}>
		{landingpageData}
	</div>
	:
	<div>
	</div>

return(
	<div>
		{loadedCheck}
	</div>
)
}
export default Settings;