import React from 'react';
import _ from 'lodash';

import AppSelector from '../apps/apps.jsx';

require('./header.css');

class FlowBar extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    if (
      !nextProps.currentUser ||
      (nextProps.currentUser && !nextProps.currentUser.user) ||
      (
        nextProps.currentUser &&
        nextProps.currentUser.user &&
        !nextProps.currentUser.user.name
      )
    ) {
      window.location.href = nextProps.ACCOUNTS_URL;
    }
  }

  render() {
    return (
      <div
        id="flow-nav-container"
        style={{
          backgroundColor: '#FFF',
          paddingTop: 2,
        }}
      >
        <div className="flow-nav-brand">
          <img
            src={this.props.logoURL}
            alt="logo"
            onClick={() => window.location.href = this.props.DASHBOARD_BASE_URL}
          />
          {this.props.showAppSelector && <AppSelector {...this.props} />}
        </div>
        <div className="flow-nav-content">
          {
            React.Children.map(
              this.props.children, (Child, id) => 
                React.cloneElement(Child, { ...this.props, key: id })
            )
          }
        </div>
      </div>
    );
  }
}

export default FlowBar;