import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import './App.scss';
import 'react-notifications/lib/notifications.css';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { persistor, store } from './appredux/store';
import { handleChangeLng } from "../src/utils/LangUtils";
const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;

const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));

const Login = React.lazy(() => import('./views/Pages/Login'));
const Register = React.lazy(() => import('./views/Pages/Register'));
const Page403 = React.lazy(() => import('./views/Pages/Page403'));
const Page404 = React.lazy(() => import('./views/Pages/Page404'));
const Page500 = React.lazy(() => import('./views/Pages/Page500'));
const SiopasMap = React.lazy(() => import('./views/Map'));

class App extends Component {

	render() {
		return (
			<Provider store={store}>
				<HashRouter>
					<React.Suspense fallback={loading()}>
						<Switch>
							<Route exact path="/login" name="Login Page" render={props => <Login {...props} />} />
							{/* <Route exact path="/home" name="Home" render={props => <DefaultLayout {...props}/>} /> */}
							<Route exact path="/register" name="Register Page" render={props => <Register {...props} />} />
							<Route exact path="/404" name="Page 404" render={props => <Page404 {...props} />} />
							<Route exact path="/403" name="Page 403" render={props => <Page403 {...props} />} />
							<Route exact path="/500" name="Page 500" render={props => <Page500 {...props} />} />
							<Route exact path="/map/view" name="Map" render={props => <SiopasMap {...props} />} />
							{/*<Route exact path="/layerswitcher" name="Layer Switcher" render={props => <LayerSwitcherExample {...props}/>} />*/}
							{/*<Route exact path="/muidt" name="Mui Datatable Example" render={props => <MuiDatatablesExample {...props}/>} />*/}
							<Route path="/" name="Home" render={props => <DefaultLayout {...props} />} />
						</Switch>
					</React.Suspense>
				</HashRouter>
			</Provider>
		);
	}
}

export default App;