import React from "react";
import { useSelector, useDispatch } from "react-redux";

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

function Core() {
	const coreState = useSelector(selectCore);
	const dispatch = useDispatch();
	console.log(plugins.default);
	const plugin = plugins.default[coreState.plugin];
	const props = {
		data: coreState.data,
		close: () => dispatch(setPlugin(false))
	};
	return <>
		{plugin ? null :
			<>
				<p>Welcome to Honda!</p>
				{Object.keys(plugins.default).map(
					i => <p
						onClick={() => dispatch(setPlugin(i))}
						key={i}
					>
						{plugins.default[i].pluginName}
					</p>)
				}
			</>
		}
		{plugin ?
			React.cloneElement(plugin(), props)
			:null
		}
	</>;
}

export default Core;