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

import { setPlugin, selectCore } from "./coreSlice";
import { selectVoice } from "./voiceSlice";
import VoiceBars from "./components/VoiceBars";
import plugins from "./plugins";

function Core() {
	const coreState = useSelector(selectCore);
	const voiceState = useSelector(selectVoice);
	const dispatch = useDispatch();
	const plugin = plugins[coreState.plugin];
	const props = {
		data: coreState.data,
		close: () => dispatch(setPlugin(false))
	};
	return <>
		<Box height="5vh" background="light-1" justify="center" direction="row">
			{voiceState.recording ? <VoiceBars style={{height: "100%"}}/>:
				voiceState.text === null ? null:
					<Text style={{paddingTop: "1em"}}>{voiceState.text}</Text>
			}
		</Box>
		{plugin ? React.createElement(plugin, props, null) : (
			<Box
				align="center"
				background="light-1"
				width="100vw"
				justify="center"
				direction="column"
				alignContent="center"
				height="95vh"
			>
				<Clock size="xxlarge" />
				<Clock size="xxlarge" type="digital" />
				<Box direction="row" margin="1.5em" wrap={true}>
					<Button onClick={() => dispatch(setPlugin("petMode"))} primary
						label="Pet Mode" />
					<Button onClick={() => dispatch(setPlugin("smartHome"))} primary
						label="Smart Home" margin="0 0 0 1em" />
					<Button onClick={() => dispatch(setPlugin("maps"))} primary
						label="Maps" margin="0 0 0 1em" />
					<Button onClick={() => dispatch(setPlugin("marketplace"))} primary
						label="Marketplace" margin="0 0 0 1em" />
				</Box>
			</Box>)
		}
	</>;
}

export default Core;