import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { Box, Button, Clock } from "grommet";

import { setPlugin, selectCore } from "./coreSlice";
import * as plugins from "./plugins";

function Core() {
	const coreState = useSelector(selectCore);
	const dispatch = useDispatch();
	const plugin = plugins.default[coreState.plugin];
	const props = {
		data: coreState.data,
		close: () => dispatch(setPlugin(false))
	};
	const dummyButtons = ["Maps", "Home Devices", "Phone"];
	return <>
		{plugin ? plugin(props) : (
			<Box
				align="center"
				background="light-1"
				width="100vw"
				justify="center"
				direction="column"
				alignContent="center"
				height="100vh"
			>
				<Clock size="xxlarge" />
				<Clock size="xxlarge" type="digital" />
				<Box direction="row" margin="1.5em" wrap={true}>
					<Button onClick={() => dispatch(setPlugin("mpd"))} primary
						label="Music Player" />
					{dummyButtons.map(i =>
						<Button primary label={i} key={i} margin="0 0 0 1em" />
					)}
				</Box>
			</Box>)
		}
	</>;
}

export default Core;