import React from 'react';
import { Router, Route, Switch, Redirect } from "react-router-dom";
import { rootRouter } from './router/rootRouter';
import { history as browserHistory } from './common/history';
import { syncHistoryWithStore } from 'mobx-react-router';
import { routerStore } from './store/routerStore';
import { Provider } from 'mobx-react';
import * as mobxStore from './store/index';

const history = syncHistoryWithStore(browserHistory, routerStore);

const App: React.FC = () => {
  return (
    <Provider {...mobxStore}>
      <Router history={history}>
        <Switch>
          <Redirect exact from="/" to="/home" />
          <Switch>
            {
              rootRouter.map(({ path, component, ...otherProps }) => (
                <Route
                  path={path}
                  component={component}
                  {...otherProps}
                  key={path}
                />
              ))
            }
            {/* <Route path="*" component={NotFound} /> */}
          </Switch>
        </Switch>
      </Router>
    </Provider>
  );
}

export default App;
