import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import {Route, Router} from 'react-router'
import { createHashHistory } from 'history'
import config 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'

const history = createHashHistory()


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 (
    <div className="app">
      <Header className='header' />
      <div className='section'>
        <Router history={history}>
          <Route path="/" component={() => <Slide {...route} className='slide' />} />
          <Switch>
            {Items}
            <Redirect to="/gis" />
          </Switch>
        </Router>
      </div>
    </div>
  )
}

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();