content: // @flow
  
  /* this is so similar to ContentWrapper we may have to merge together in the
  future */
  
  import React from 'react';
  import { Grid } from 'react-bootstrap';
  
  export default class Header extends React.Component {
    render() {
      const { content, getComponent, contentFillsWindow } = this.props;
      const scContent = content.scContent;
  
      // determine our background
      let Background = getComponent('Background', '');
  
      let MainNav;
      if (!scContent.noNav) MainNav = getComponent('MainNav', '');
  
      // determin style
      let style = {}, height = '';
      if (scContent.height && !contentFillsWindow) {
  
        if (scContent.background && scContent.background.parallax) {
          /* we must use a fixed height for parallax (fixed) background because
          it will not "grow" with content as other parallax does */
          style.height = scContent.height;
        }
        else style.minHeight = scContent.height;
        height = scContent.height;
      }
  
      // determine title
      let title;
      if (!scContent.noTitle) {
        if (content.scTitle) title = content.scTitle;
        else {
          // TODO: use page title. If none, use page name
        }
      }
  
      // get children
      let children = [];
      if (scContent && scContent.children) {
        children = scContent.children.map((item, index) => {
          let NodeComponent = getComponent(item.scType, '');
          return (
            <NodeComponent key={`head-item-${index}`} content={item}
              getComponent={getComponent} />
          );
        });
      }
  
      return (
        <div className="header" style={style}>
          {scContent && scContent.background
            && <Background background={scContent.background} height={height} isHeader />}
          {MainNav &&
            <MainNav getComponent={getComponent} />
          }
          <Grid fluid={scContent.isFluid} className={scContent.className}>
            {title &&
              <div className="header-title">
                <h1>{title}</h1>
                {scContent.subTitle && <div>{scContent.subTitle}</div>}
              </div>
            }
            {!title &&
              <div className="no-header-title"></div>
            }
            {children}
          </Grid>
        </div>
      );
    }
  }
  