import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import GenericPageWithIcon from "./GenericPageWithIcon";
import { Sun } from "grommet-icons";
import axios from "axios";
import { CAR_API } from "../config";

function PetMode(props) {
	const [ temp, setTemp ] = useState(null);
	useEffect(() => {
		axios.get(`${CAR_API}data/InsideTemperature`)
			.then(resp => setTemp(resp.data.value));
		const id = setInterval(
			() => axios.get(`${CAR_API}data/InsideTemperature`)
				.then(resp => setTemp(resp.data.value)),
			1000
		);
		return () => clearInterval(id);
	}, []);
	if (temp === null)
		return <></>;
	return (
		<GenericPageWithIcon
			title={temp === null ? "Fetching temperature": `${temp}°C`}
			description={`The temperature inside is ${temp}°C. The pet / child is ${temp > 35 ? "un": ""}safe.`}
			icon={<Sun color={temp > 35 ? "status-critical": "plain"} size="xlarge" />}
			close={props.close}
		/>);
}

PetMode.propTypes = {
	close: PropTypes.func
};

PetMode.pluginName = "Temperature";

export default PetMode;