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

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

import Spinner from "./components/common/spinner";

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

import fakeToken from './utils/token'
import { bindActionCreators } from "redux";

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

        return (
            <div className="app">
                <Header />
                <Suspense fallback={<Spinner />}>
                    <Switch>
                        {config.map(route =>
                            <ProtectedRoute
                                path={route.path}
                                component={route.component}
                                access={route.access}
                                user={user}
                                key={route}
                                tokenAuth={tokenAuth}
                                exact
                            />
                        )}
                    </Switch>
                </Suspense>
                <Footer />
            </div>
        )
    }
}

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

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