import classNames from 'classnames';
import React from 'react';

class PageHeader extends React.Component {

  getIcon() {
    let {icon, iconClassName} = this.props;

    if (icon == null) {
      return null;
    }

    let iconClasses = classNames(
      'icon icon-large icon-image-container',
      iconClassName
    );

    return (
      <div className="media-object-item">
        <div className={iconClasses}>
          {icon}
        </div>
      </div>
    );
  }

  getTitle() {
    let {title, titleClassName} = this.props;

    if (title == null) {
      return null;
    }

    let titleClasses = classNames(
      'flush inverse',
      titleClassName
    );

    return (
      <h1 className={titleClasses}>{title}</h1>
    );
  }

  getSubTitle() {
    let {subTitle} = this.props;

    if (subTitle == null) {
      return null;
    }

    return (<div>{subTitle}</div>);
  }

  render() {
    let {
      children,
      className,
      dividerClassName,
      mediaWrapperClassName
    } = this.props;

    let classes = classNames(
      'container container-fluid container-pod container-pod-short',
      'flush flush-top',
      className
    );

    let dividerClasses = classNames(
      'container-pod container-pod-short flush-top',
      'container-pod-divider-bottom container-pod-divider-bottom-align-right',
      'container-pod-divider-inverse',
      dividerClassName
    );

    let mediaWrapperClasses = classNames(
      'media-object-spacing-wrapper media-object-spacing-narrow',
      'media-object-offset',
      mediaWrapperClassName
    );

    return (
      <div className={classes}>
        <div className={dividerClasses}>
          <div className={mediaWrapperClasses}>
            <div className="media-object flex-box flex-box-align-vertical-center">
              {this.getIcon()}
              <div className="media-object-item">
                {this.getTitle()}
                {this.getSubTitle()}
              </div>
            </div>
          </div>
          {children}
        </div>
      </div>
    );
  }
}

PageHeader.propTypes = {
  icon: React.PropTypes.node,
  subTitle: React.PropTypes.node,
  title: React.PropTypes.string,

  className: React.PropTypes.string,
  dividerClassName: React.PropTypes.string,
  mediaWrapperClassName: React.PropTypes.string,
  titleClassName: React.PropTypes.string,
  iconClassName: React.PropTypes.string
};

module.exports = PageHeader;

@@ -2223,190 +2223,520 @@
 pes.
-string,%0A  dividerClassName: React.PropTypes.string,%0A  mediaWrapperClassName: React.PropTypes.string,%0A  titleClassName: React.PropTypes.string,%0A  iconClassName: React.PropTypes.string
+oneOfType(%5B%0A    React.PropTypes.string,%0A    React.PropTypes.object,%0A  %5D),%0A  dividerClassName: React.PropTypes.oneOfType(%5B%0A    React.PropTypes.string,%0A    React.PropTypes.object,%0A  %5D),%0A  mediaWrapperClassName: React.PropTypes.oneOfType(%5B%0A    React.PropTypes.string,%0A    React.PropTypes.object,%0A  %5D),%0A  titleClassName: React.PropTypes.oneOfType(%5B%0A    React.PropTypes.string,%0A    React.PropTypes.object,%0A  %5D),%0A  iconClassName: React.PropTypes.oneOfType(%5B%0A    React.PropTypes.string,%0A    React.PropTypes.object,%0A  %5D)
 %0A%7D;%0A

Classnames can be string or object