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";

const notFound = lazy(() => import('./components/public-components/notFound'));

class Router extends React.Component {

    componentDidMount() {
        const storagedUser = localStorage.getItem(fakeToken);
        const { tokenAuth } = this.props;

        storagedUser && tokenAuth(JSON.parse(storagedUser));
    }

    render() {
        const { user } = this.props;

        //map located here because of switch-bag

        const protectedRoutes = config.map(route =>
            <ProtectedRoute
                path={route.path}
                component={route.component}
                access={route.access}
                user={user}
                exact
            />
        );

        return (
            <div className="app">
                <Header />
                <Suspense fallback={<Spinner />}>
                    <Switch>
                        {protectedRoutes}
                        <Route component={notFound} />
                    </Switch>
                </Suspense>
                <Footer />
            </div>
        )
    }
}

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

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