'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactHelmet = require('react-helmet');

var _reactHelmet2 = _interopRequireDefault(_reactHelmet);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _TitleBar = require('../../../styles/cspace-ui/TitleBar.css');

var _TitleBar2 = _interopRequireDefault(_TitleBar);

var _Subtitle = require('../../../styles/cspace-ui/Subtitle.css');

var _Subtitle2 = _interopRequireDefault(_Subtitle);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* global window */

const propTypes = {
  title: _propTypes2.default.node,
  subtitle: _propTypes2.default.node,
  aside: _propTypes2.default.node,
  icon: _propTypes2.default.node,
  nav: _propTypes2.default.node,
  serviceType: _propTypes2.default.string,
  updateDocumentTitle: _propTypes2.default.bool,
  onDocked: _propTypes2.default.func
};

class TitleBar extends _react.Component {
  constructor(props) {
    super(props);

    this.setDomNode = this.setDomNode.bind(this);
    this.handleScroll = this.handleScroll.bind(this);

    this.state = {
      docked: false
    };
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll, false);

    // eslint-disable-next-line react/no-did-mount-set-state
    this.setState({
      documentTitle: this.getDocumentTitle()
    });
  }

  componentDidUpdate(prevProps) {
    const node = this.domNode;

    // Update the document title, if necessary.

    const updateDocumentTitle = this.props.updateDocumentTitle;


    if (updateDocumentTitle) {
      var _props = this.props;
      const title = _props.title,
            aside = _props.aside;
      const prevTitle = prevProps.title,
            prevAside = prevProps.aside;


      if (title !== prevTitle || aside !== prevAside) {
        // eslint-disable-next-line react/no-did-update-set-state
        this.setState({
          documentTitle: this.getDocumentTitle()
        });
      }
    }

    // If the height of the title bar content changes while the title bar is docked, fire onDocked
    // in order to notify listeners of the new height.

    if (node && this.state.docked) {
      const contentNode = node.firstElementChild;

      if (contentNode.offsetHeight !== this.dockedHeight) {
        this.dockedHeight = contentNode.offsetHeight;

        const onDocked = this.props.onDocked;


        if (onDocked) {
          onDocked(this.dockedHeight);
        }
      }
    }
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll, false);
  }

  getDocumentTitle() {
    const titleNode = this.domNode.querySelector('h1');
    const titleText = titleNode ? titleNode.textContent : null;

    const asideNode = this.domNode.querySelector('aside');
    const asideText = asideNode ? asideNode.textContent : null;

    return [titleText, asideText].filter(part => !!part).join(' | ');
  }

  setDomNode(ref) {
    this.domNode = ref;
  }

  handleScroll() {
    const onDocked = this.props.onDocked;


    const node = this.domNode;

    if (!node) return;

    if (this.state.docked) {
      if (window.scrollY < node.offsetTop) {
        this.setState({
          docked: false
        });
      }
    } else if (window.scrollY >= node.offsetTop) {
      this.dockedHeight = node.offsetHeight;

      this.setState({
        docked: true
      });

      if (onDocked) {
        onDocked(this.dockedHeight);
      }
    }
  }

  renderDocumentTitle() {
    const updateDocumentTitle = this.props.updateDocumentTitle;


    if (!updateDocumentTitle) {
      return null;
    }

    const documentTitle = this.state.documentTitle;


    return _react2.default.createElement(
      _reactHelmet2.default,
      null,
      _react2.default.createElement(
        'title',
        null,
        documentTitle
      )
    );
  }

  renderNav() {
    const nav = this.props.nav;


    return nav;
  }

  renderTitle() {
    const title = this.props.title;


    return _react2.default.createElement(
      'h1',
      null,
      title
    );
  }

  renderAside() {
    const aside = this.props.aside;


    if (aside !== null && typeof aside !== 'undefined') {
      return _react2.default.createElement(
        'aside',
        null,
        _react2.default.createElement(
          'h2',
          null,
          aside
        )
      );
    }

    return null;
  }

  renderSubtitle() {
    const subtitle = this.props.subtitle;


    if (subtitle !== null && typeof subtitle !== 'undefined') {
      return _react2.default.createElement(
        'div',
        { className: _Subtitle2.default.common },
        subtitle
      );
    }

    return null;
  }

  render() {
    const docked = this.state.docked;
    var _props2 = this.props;
    const icon = _props2.icon,
          serviceType = _props2.serviceType;


    const className = (0, _classnames2.default)(_TitleBar2.default[serviceType], docked ? _TitleBar2.default.docked : _TitleBar2.default.common);
    const inlineStyle = docked ? { height: this.domNode.offsetHeight } : {};

    return _react2.default.createElement(
      'header',
      {
        className: className,
        ref: this.setDomNode,
        style: inlineStyle
      },
      this.renderDocumentTitle(),
      _react2.default.createElement(
        'div',
        null,
        this.renderNav(),
        _react2.default.createElement(
          'div',
          null,
          icon,
          this.renderTitle(),
          this.renderAside()
        ),
        this.renderSubtitle()
      )
    );
  }
}

exports.default = TitleBar;
TitleBar.propTypes = propTypes;