import React, { Suspense, lazy } from "react";
import { Switch, Route, withRouter } from "react-router-dom";
import { connect } from 'react-redux';

// import Header from "./containers/header";
// import Footer from './components/public-components/footer';

import ProtectedRoute from './components/common/protectedRoute';
import config from './configs/routerConfig';

import { bindActionCreators } from "redux";

class Router extends React.Component {
    render() {
        const { user, tokenAuth } = this.props;

        // TODO: add spinner, user
        return (
            <div className="app">
                <Suspense fallback={
                    <div class="text-center">
                        <div class="spinner-border" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                }>
                    <Switch>
                        {config.map(route =>
                            <ProtectedRoute
                                path={route.path}
                                component={route.component}
                                access={route.access}
                                user={{data: {role: 1}}}
                                key={route}
                                exact
                            />
                        )}
                    </Switch>
                </Suspense>
            </div>
        )
    }
}

// const mapStateToProps = state => ({
//     user: state.user
// })
// const mapDispatchToProps = dispatch => bindActionCreators({ tokenAuth }, dispatch);

// export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Router));

export default Router;