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

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

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

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

SmartHome.pluginName = "Smart Home";

export default SmartHome;