import React from 'react';
import { connect } from 'react-redux';

import Header from './Header.jsx'
import Navigation from './Navigation.jsx'
import Ribbon from './Ribbon.jsx'
import Footer from './Footer.jsx'
import Shortcut from './Shortcut.jsx'
import DemoStylesSwitcher from '../../../components/layout/demo/DemoStylesSwitcher.jsx'
import UserActions from '../../../components/user/actions/UserActions.js'
require('../../../components/layout/less/layout.less');
const projects = window.ws.getSubscription('projects');

const projectListStyle = {
    margin: '0px!important',
    marginTop: '-50px!important'
};

let Layout = React.createClass({
    componentWillMount: function () {
        UserActions.init();
        projects.on('redux', (props) => {
            this.props.reduxWSListener(props.type, props.data);
        });
    },
    render: function(){

        const { project } = this.props;

        return (
            <div>
                {project ? <Header /> : ''}
                {project ? <Navigation /> : ''}

                <div id="main" role="main" style={!project ? projectListStyle : ''}>
                    <DemoStylesSwitcher />
                    <Ribbon />

                    {this.props.children}
                </div>

                {project ? <Footer /> : ''}
                {/*<Shortcut />*/}
            </div>
        )
    }
});

//export default Layout

export default connect(
    state => ({
        redux: state,
        project: state.project
    }),
    dispatch => ({
        reduxWSListener: (type, data) => {
            dispatch({type, data});
        }
    })
)(Layout);