"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactHelmet = require("react-helmet");
var _classnames = _interopRequireDefault(require("classnames"));
var _TitleBar = _interopRequireDefault(require("../../../styles/cspace-ui/TitleBar.css"));
var _Subtitle = _interopRequireDefault(require("../../../styles/cspace-ui/Subtitle.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* global window */

const propTypes = {
  title: _propTypes.default.node,
  subtitle: _propTypes.default.node,
  aside: _propTypes.default.node,
  icon: _propTypes.default.node,
  nav: _propTypes.default.node,
  serviceType: _propTypes.default.string,
  updateDocumentTitle: _propTypes.default.bool,
  onDocked: _propTypes.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;
    if (updateDocumentTitle) {
      const {
        title,
        aside
      } = this.props;
      const {
        title: prevTitle,
        aside: prevAside
      } = prevProps;
      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.

    const {
      docked
    } = this.state;
    if (node && docked) {
      const contentNode = node.firstElementChild;
      if (contentNode.offsetHeight !== this.dockedHeight) {
        this.dockedHeight = contentNode.offsetHeight;
        const {
          onDocked
        } = this.props;
        if (onDocked) {
          onDocked(this.dockedHeight);
        }
      }
    }
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll, false);
  }
  handleScroll() {
    const {
      onDocked
    } = this.props;
    const node = this.domNode;
    if (!node) return;
    const {
      docked
    } = this.state;
    if (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);
      }
    }
  }
  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;
  }
  renderDocumentTitle() {
    const {
      updateDocumentTitle
    } = this.props;
    if (!updateDocumentTitle) {
      return null;
    }
    const {
      documentTitle
    } = this.state;
    return /*#__PURE__*/_react.default.createElement(_reactHelmet.Helmet, null, /*#__PURE__*/_react.default.createElement("title", null, documentTitle));
  }
  renderNav() {
    const {
      nav
    } = this.props;
    return nav;
  }
  renderTitle() {
    const {
      title
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("h1", null, title);
  }
  renderAside() {
    const {
      aside
    } = this.props;
    if (aside !== null && typeof aside !== 'undefined') {
      return /*#__PURE__*/_react.default.createElement("aside", null, /*#__PURE__*/_react.default.createElement("h2", null, aside));
    }
    return null;
  }
  renderSubtitle() {
    const {
      subtitle
    } = this.props;
    if (subtitle !== null && typeof subtitle !== 'undefined') {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: _Subtitle.default.common
      }, subtitle);
    }
    return null;
  }
  render() {
    const {
      docked
    } = this.state;
    const {
      icon,
      serviceType
    } = this.props;
    const className = (0, _classnames.default)(_TitleBar.default[serviceType], docked ? _TitleBar.default.docked : _TitleBar.default.common);
    const inlineStyle = docked ? {
      height: this.domNode.offsetHeight
    } : {};
    return /*#__PURE__*/_react.default.createElement("header", {
      className: className,
      ref: this.setDomNode,
      style: inlineStyle
    }, this.renderDocumentTitle(), /*#__PURE__*/_react.default.createElement("div", null, this.renderNav(), /*#__PURE__*/_react.default.createElement("div", null, icon, this.renderTitle(), this.renderAside()), this.renderSubtitle()));
  }
}
exports.default = TitleBar;
TitleBar.propTypes = propTypes;