import React, { PropTypes } from 'react';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
import { APP_BAR } from '../identifiers';
import InjectIconButton from '../button/IconButton';

const factory = (IconButton) => {
  class AppBar extends React.Component {
    static propTypes = {
      children: PropTypes.node,
      className: PropTypes.string,
      fixed: PropTypes.bool,
      flat: PropTypes.bool,
      leftIcon: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.element,
      ]),
      onLeftIconClick: PropTypes.func,
      onRightIconClick: PropTypes.func,
      rightIcon: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.element,
      ]),
      scrollHide: PropTypes.bool,
      theme: PropTypes.shape({
        appBar: PropTypes.string,
        inner: PropTypes.string,
        fixed: PropTypes.string,
        flat: PropTypes.string,
        leftIcon: PropTypes.string,
        rightIcon: PropTypes.string,
        scrollHide: PropTypes.string,
        title: PropTypes.string,
      }),
      title: PropTypes.node,
    };

    static defaultProps = {
      className: '',
      fixed: false,
      flat: false,
      scrollHide: false,
    };

    state = { hidden: false, height: 0 };

    componentDidMount() {
      if (this.props.scrollHide) {
        this.initializeScroll();
      }
    }

    componentWillReceiveProps(nextProps) {
      if (!this.props.scrollHide && nextProps.scrollHide) {
        this.initializeScroll();
      }

      if (this.props.scrollHide && !nextProps.scrollHide) {
        this.endScroll();
      }
    }

    componentWillUnmount() {
      if (this.props.scrollHide) {
        this.endScroll();
      }
    }

    initializeScroll = () => {
      window.addEventListener('scroll', this.handleScroll);
      const { height } = this.rootNode.getBoundingClientRect();
      this.curScroll = window.scrollY;
      this.setState({ height });
    };

    endScroll = () => {
      window.removeEventListener('scroll', this.handleScroll);
    };

    handleScroll = () => {
      const scrollDiff = this.curScroll - window.scrollY;
      const hidden = scrollDiff < 0
        && window.scrollY !== undefined
        && window.scrollY > this.state.height;
      this.setState({ hidden });
      this.curScroll = window.scrollY;
    };

    render() {
      const {
        children,
        leftIcon,
        onLeftIconClick,
        onRightIconClick,
        rightIcon,
        theme,
        title,
      } = this.props;
      const className = classnames(theme.appBar, {
        [theme.fixed]: this.props.fixed,
        [theme.flat]: this.props.flat,
        [theme.scrollHide]: this.state.hidden,
      }, this.props.className);

      return (
        <header
          className={className}
          data-react-toolbox="app-bar"
          ref={(node) => { this.rootNode = node; }}
        >
          <div className={theme.inner}>
            {leftIcon && <IconButton
              inverse
              className={classnames(theme.leftIcon)}
              onClick={onLeftIconClick}
              icon={leftIcon}
            />
            }
            {title && <h1 className={classnames(theme.title)}>{title}</h1>}
            {children}
            {rightIcon && <IconButton
              inverse
              className={classnames(theme.rightIcon)}
              onClick={onRightIconClick}
              icon={rightIcon}
            />
            }
          </div>
        </header>
      );
    }
  }

  return AppBar;
};

const AppBar = factory(InjectIconButton);
export default themr(APP_BAR)(AppBar);
export { factory as appBarFactory };
export { AppBar };

@@ -1085,29 +1085,97 @@
 : PropTypes.
-node,
+oneOfType(%5B%0A        PropTypes.string,%0A        PropTypes.element,%0A      %5D)
 %0A    %7D;%0A%0A   
@@ -1434,32 +1434,33 @@
 );%0A      %7D%0A    %7D
+;
 %0A%0A    componentW
@@ -1685,24 +1685,25 @@
      %7D%0A    %7D
+;
 %0A%0A    compon
@@ -1791,24 +1791,25 @@
      %7D%0A    %7D
+;
 %0A%0A    initia
@@ -2410,24 +2410,257 @@
 ollY;%0A    %7D;
+%0A  %0A    renderTitle = () =%3E %7B%0A      const %7Btitle%7D = this.props%0A      if (!title) return;%0A      if (typeof(title) === 'function') return title;%0A      return (%0A        %3Ch1 className=%7Bclassnames(theme.title)%7D%3E%7Btitle%7D%3C/h1%3E%0A      )%0A    %7D;
 %0A%0A    render
@@ -3479,69 +3479,26 @@
    %7B
-title && %3Ch1 className=%7Bclassnames(theme.title)%7D%3E%7Btitle%7D%3C/h1%3E
+renderTitle(title)
 %7D%0A  

Add possibility to render component as AppBar title