import React, { Suspense, useState } from "react";
import { Spin } from "antd";

import {
	BrowserRouter as Router,
	Route,
	Switch,
	Redirect,
} from "react-router-dom";

const Signup = React.lazy(() => import("./Signup"));
const App = React.lazy(() => import("./App"));

const AppWrapper = () => {
	const [isUserAuthenticated, setIsUserAuthenticated] = useState(false);

	return (
		<Router basename="/">
			<Suspense fallback={<Spin size="large" />}>
				<Switch>
					<Route path="/signup" exact component={Signup} />
					<Route path="/application" exact component={App} />
					<Route path="/application/:servicename" component={App} />
					<Route path="/service-map" component={App} />
					<Route path="/traces" exact component={App} />
					<Route path="/traces/:id" component={App} />
					<Route path="/usage-explorer" component={App} />

					<Route
						path="/"
						exact
						render={() => {
							return localStorage.getItem("isLoggedIn") === "yes" ? (
								<Redirect to="/application" />
							) : (
								<Redirect to="/signup" />
							);
						}}
					/>
				</Switch>
			</Suspense>
		</Router>
	);
};

export default AppWrapper;