import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { Box, Button } from "grommet";

import { MAPS_API } from "../config";

function Maps(props) {
	const [ location, setLocation ] = useState([null, null]);
	useEffect(() => {
		navigator.geolocation.getCurrentPosition(
			position => setLocation([position.coords.latitude, position.coords.longitude]),
			() => {}
		);
	});

	const mapsEmbedUrl = new URL("https://www.google.com/maps/embed/v1/view");
	mapsEmbedUrl.searchParams.append("key", MAPS_API);
	mapsEmbedUrl.searchParams.append("center", `${location[0]},${location[1]}`);
	mapsEmbedUrl.searchParams.append("zoom", 14);
	return (
		<Box
			align="center"
			background="light-1"
			width="100vw"
			justify="center"
			direction="column"
			alignContent="center"
			height="95vh"
		>
			{location[0] === null ?
				"Loading Location":
				<iframe
					width="650"
					height="300"
					frameBorder="0"
					style={{ border: 0 }}
					src={mapsEmbedUrl.href}>
				</iframe>
			}
			<Button primary size="large" onClick={props.close}
				label="Dismiss" margin="1.5em" />
		</Box>
	);
}

Maps.propTypes = {
	data: PropTypes.object,
	close: PropTypes.func
};

Maps.pluginName = "Maps";

export default Maps;