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

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

function SmartHome(props) {
	const [ idx, setIdx ] = useState(0);
	useEffect(() => {
		const id = setInterval(() => setIdx(i => i + 1), 20);
		return () => clearInterval(id);
	}, []);
	return (
		<Box
			align="center"
			background="light-1"
			width="100vw"
			justify="center"
			direction="column"
			alignContent="center"
			height="95vh"
		>
			<img src={`${CAMERA_URL}?id=${idx}`} />
			<Button primary size="large" onClick={props.close}
				label="Dismiss" margin="1.5em" />
		</Box>
	);
}

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

SmartHome.pluginName = "Smart Home";

export default SmartHome;