import React, {Component} from 'react';
import {connect} from 'react-redux';
import {BrowserRouter} from 'react-router-dom';
import {getModules} from '../actions/login/authActions';
import {setActiveModule} from '../actions/page/pageActions';
import Menu from '../mainComponents/menu/Menu.jsx';
import WiaasRouter from '../mainComponents/wiaasRouter/WiaasRouter.jsx';
import Footer from './footer/Footer.jsx';
import './contentContainer.css';

class ContentContainer extends Component {
    constructor(props) {
        super(props);

        this.addActiveClass = this.addActiveClass.bind(this);
    }

    componentDidMount() {
        this.props.dispatch(getModules());
    }

    addActiveClass(moduleName) {
        this.props.dispatch(setActiveModule(moduleName));

    }

    render() {
        const {activeModule} = this.props;
        return (
             <BrowserRouter>
               <div className="main-wrapper">
                   <header className="App-header">
                       <Menu addActiveClass={this.addActiveClass} activeModule={activeModule} />
                   </header>
                   <WiaasRouter addActiveClass={this.addActiveClass} />
                   <Footer/>
            </div>
            </BrowserRouter>
        );
    }
}

const mapStateToProps = (state) => ({
    activeModule: state.pageReducer.activeModule
});

export default connect(mapStateToProps)(ContentContainer);