import React, { useEffect } from "react";
import { Switch, withRouter } from "react-router-dom";

import Header from "./components/header";

import Main from "./containers/main";
import Count from "./containers/count";
import ReduxTodo from "./containers/reduxTodo";
import AuthContainer from "./containers/auth";

import { PrivateRoute } from "./private-router";
import { checkJWT } from "./utils/checkJWT";

const PAGENOTFOUND = () => <div>PAGE 404 NOT FOUND</div>;

const route = [
	{
		id: 1,
		exact: true,
		path: "/",
		protected: false,
		// hasAccess: [],
		component: Main
	},
	{
		id: 5,
		exact: true,
		path: "/auth",
		protected: false,
		component: AuthContainer
	},
	{
		id: 2,
		exact: true,
		path: "/count",
		protected: true,
		component: Count
	},
	{
		id: 3,
		exact: true,
		path: "/redux-todo",
		protected: true,
		component: ReduxTodo
	},
	{
		id: 4,
		component: PAGENOTFOUND
	}
];

export const App = withRouter(({ history }) => {
	useEffect(() => {
		const token = localStorage.getItem("token");
		if (token) {
			const exp = checkJWT(token);
			if (!exp) {
				history.push("/auth");
				localStorage.removeItem("token");
			}
		}
	}, [history]);

	return (
		<div className="container">
			<Header />
			<Switch>
				{route.map(el => (
					<PrivateRoute
						protectedRoute={el.protected}
						key={el.id}
						exact={el.exact}
						path={el.path}
						component={el.component}
					/>
				))}
			</Switch>
		</div>
	);
});