import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import {Route, Router} from 'react-router'
import config, {history} from './router.config'
import Header from './layout/Header'
import Slide from './layout/Slide';
import Combination from './layout/Combination'
import { RouteComponentProps, Switch, Redirect } from 'react-router'
import Login from './page/Login'


function App() {
  let [route, setRoute] = useState()
  
  let Items = config.map(item => (
    <Route
      key={item.path}
      path={item.path}
      component={(r: any) => (
        <Combination 
          {...r}
          real={route}
          layer={item.component}
          className="main"
          currentRoute={(r: RouteComponentProps) => (route && r.match.path === route.match.path) || setRoute(r) } />
      )}
    />
  ))

  return (
    <Router history={history}>
      <Switch>
        <Route path="/login" component={Login} />
        <div className="app">
          <Header className='header' />
          <div className='section'>
            <Route path="/" component={() => <Slide {...route} className='slide' />} />
            <Switch>
              {Items}
              <Redirect to="/gis" />
            </Switch>
          </div>
        </div>
      </Switch>
    </Router>
  )
}


ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
