import React, { Component } from 'react';
import Header from './header.jsx';
import Main from './main.jsx';
import Loader from './loader.jsx';
import { connect } from 'react-redux';
import { getOrganisationCode } from '../utils/helpers.jsx';

class Portal extends Component {
  /** */
  render() {
    let { auth, me, loading } = this.props;
    let header = null;
    let organisationClass = 'default';
    if(getOrganisationCode()) {
      organisationClass = getOrganisationCode().toLowerCase();
    }

    if(auth.get('isLoggedIn')) {
      header = (<div className="outer">
        <div className={`portal-bg banner ${organisationClass}`}>
          <div className="row">
            <Header className="columns medium-12" location={this.props.location}
              loggedIn={auth.get('isLoggedIn')} me={me} auth={auth} />
          </div>
        </div>
      </div>);
    }

    return (
      <div className="klantportal">
        {header}
        <div className="outer">
          <div>
            <div className="row">
              <Loader loading={loading} />
              <Main className="columns medium-12" children={this.props.children} />
            </div>
          </div>
        </div>
      </div>
      );
  }
}

const mapStateToProps = (state) => {
  return {
    auth: state.auth,
    me: state.me,
    loading: state.loading
  };
};

Portal.contextTypes = {
  router: React.PropTypes.object.isRequired
};

export default connect(mapStateToProps)(Portal);