import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import "antd/dist/antd.css";
import "./style.css";
import * as serviceWorker from './serviceWorker';
import {Route, Router} from 'react-router'
import config, {history, RouteItem} from './router.config'
import Header from './layout/Header'
import Slide from './layout/Slide';
import Combination from './layout/Combination'
import { RouteComponentProps, Switch } from 'react-router'
import {Provider} from 'react-redux'
import store from './store'

function App() {
  const [route] = useState<any>()
  const renderRoutes = (config: RouteItem[]) => 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) } />
      )}
    />
  ))
  const indetRoutes = renderRoutes(config.filter(route => !route.joinTab))
  const jointRoutes = renderRoutes(config.filter(route => route.joinTab))

  
  return (
    <Provider store={store}>
      <div className="app">
        <Header className='header' />
        <Router history={history}>
          <Switch>
            {indetRoutes}
            <div className='section'>
              <Route path="/:sid" component={() => <Slide {...route} className='slide' />} />
              <Switch>
                {jointRoutes}
              </Switch>
            </div>
          </Switch>
        </Router>
      </div>
    </Provider>
  )
}


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