import { createElement, Component } from '@wordpress/element'
import { Provider, getDefaultValue } from './context'
import createHashSource from 'hash-source'
import Heading from './Heading'
import {
	Router,
	Link,
	Location,
	LocationProvider,
	createHistory
} from '@reach/router'
import ctEvents from 'ct-events'

import Navigation from './Navigation'
import Home from './screens/Home'
import SystemStatus from './screens/SystemStatus'
import RecommendedPlugins from './screens/RecommendedPlugins'

let history = createHistory(createHashSource())
/*
ctEvents.on('ct:dashboard:routes', r =>
	r.push({
		Component: () => <div key="test">hello</div>,
		path: '/test'
	})
)
*/

export default class Dashboard extends Component {
	render() {
		const userRoutes = []
		ctEvents.trigger('ct:dashboard:routes', userRoutes)

		return (
			<LocationProvider history={history}>
				<Provider
					value={{
						...getDefaultValue(),
						theme_version: ctDashboardLocalizations.theme_version,
						theme_name: ctDashboardLocalizations.theme_name
					}}>
					<header>
						<Heading />
						<Navigation />
					</header>

					<section>
						<Router primary={false} className="router">
							<Home path="/" />
							<SystemStatus focus={false} path="system" />
							<RecommendedPlugins path="plugins" />

							{userRoutes.map(({ Component, path }) => (
								<Component key={path} path={path} />
							))}
						</Router>
					</section>
				</Provider>
			</LocationProvider>
		)
	}
}