import React from "react";
import PropTypes from "prop-types";
import { Box, Button, Card, CardBody, CardFooter, CardHeader, Heading } from "grommet";
import { InstallOption, Trash } from "grommet-icons";


function Marketplace(props) {
	const plugins = [
		{
			name: "Maps",
			description: "Google Maps is a mapping service. It offers satellite imagery, aerial photography, street maps, 360° interactive panoramic views of streets, real-time traffic conditions, and route planning for traveling.",
			installed: true
		},
		{
			name: "Smart Home",
			description: "Smart Home Plugin lets you integrate with various well known smart devices allowing you to stream video from various devices.",
			installed: true
		},
		{
			name: "Spotify",
			description: "With Spotify, you have access to a world of music. You can listen to artists and albums, or create your own playlist of your favourite songs.",
			installed: false
		},
	];
	return (
		<Box
			align="center"
			background="light-1"
			width="100vw"
			justify="center"
			direction="column"
			alignContent="center"
			height="95vh"
		>
			<Box wrap="wrap" direction="row">
				{
					plugins.map(i =>
						<Card key={i.name} style={{margin: "1em", width: "30%"}}>
							<CardHeader pad="medium"><Heading>{i.name}</Heading></CardHeader>
							<CardBody pad="medium">{i.description}</CardBody>
							<CardFooter pad="medium" justify="center">
								<Button
									label={i.installed ? "Uninstall": "Install"}
									icon={i.installed ?
										<Trash color="status-error" /> :
										<InstallOption color="status-ok" />
									}
								/>
							</CardFooter>
						</Card>
					)
				}
			</Box>
			<Button primary size="large" onClick={props.close}
				label="Dismiss" margin="1.5em" />
		</Box>
	);
}

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

Marketplace.pluginName = "Marketplace";

export default Marketplace;