'use strict';

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

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _dec, _class, _class2, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _CustomPropTypes = require('@instructure/ui-utils/lib/react/CustomPropTypes');

var _CustomPropTypes2 = _interopRequireDefault(_CustomPropTypes);

var _CloseButton = require('@instructure/ui-buttons/lib/components/CloseButton');

var _CloseButton2 = _interopRequireDefault(_CloseButton);

var _Button = require('@instructure/ui-buttons/lib/components/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Breadcrumb = require('@instructure/ui-breadcrumb/lib/components/Breadcrumb');

var _Breadcrumb2 = _interopRequireDefault(_Breadcrumb);

var _BreadcrumbLink = require('@instructure/ui-breadcrumb/lib/components/Breadcrumb/BreadcrumbLink');

var _BreadcrumbLink2 = _interopRequireDefault(_BreadcrumbLink);

var _IconBank = require('@instructure/ui-icons/lib/Line/IconBank');

var _IconBank2 = _interopRequireDefault(_IconBank);

var _lib = require('@instructure/ui-themeable/lib');

var _lib2 = _interopRequireDefault(_lib);

var _formatMessage = require('../../../../common/format-message');

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _theme = require('./theme');

var _theme2 = _interopRequireDefault(_theme);

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

var styles = {
  template: function template(theme) {
    return '/*  imported from styles.css \n */\n\n.NavWrapper__styles__nav {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: ' + theme.navPaddingTopBottom + ' ' + theme.navPaddingLeftRight + ';\n  border-bottom: ' + theme.navBorderWidth + ' solid ' + theme.navBorderColor + ';\n  background-color: ' + theme.navBackgroundColor + ';\n  position: -webkit-sticky;\n  position: sticky;\n  top: 0;\n  width: 100%;\n  box-sizing: border-box;\n  z-index: 4444;\n}\n\n.NavWrapper__styles__crumbs {\n  flex: 1;\n}\n\n/* The normalize.css reset sets -webkit-appearance to button here:\n * https://github.com/necolas/normalize.css/blob/4.2.0/normalize.css#L302-L307.\n * This causes non-actionable breadcrumbs to appear as buttons, because the\n * instui Link component adds type="button" to everything that doesn\'t have an\n * href.\n *\n * TODO: remove when https://instructure.atlassian.net/browse/INSTUI-1554 lands\n */\n.NavWrapper__styles__crumbs [type="button"] {\n  /* stylelint-disable property-no-vendor-prefix */\n  -webkit-appearance: none;\n  /* stylelint-enable property-no-vendor-prefix */\n}\n';
  },
  'nav': 'NavWrapper__styles__nav',
  'crumbs': 'NavWrapper__styles__crumbs'
};
var NavWrapper = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp = _class2 = function (_Component) {
  (0, _inherits3.default)(NavWrapper, _Component);

  function NavWrapper() {
    (0, _classCallCheck3.default)(this, NavWrapper);
    return (0, _possibleConstructorReturn3.default)(this, (NavWrapper.__proto__ || Object.getPrototypeOf(NavWrapper)).apply(this, arguments));
  }

  (0, _createClass3.default)(NavWrapper, [{
    key: 'renderBreadcrumbLinks',
    value: function renderBreadcrumbLinks() {
      var firstLink = _react2.default.createElement(
        _BreadcrumbLink2.default,
        {
          icon: _react2.default.createElement(_IconBank2.default, { size: 'x-small' }),
          key: 'Banks',
          onClick: this.props.navigateToBanks,
          autoFocus: Boolean(this.props.navigateToBanks)
        },
        '\u30A2\u30A4\u30C6\u30E0\u30D0\u30F3\u30AF'
      );
      // If Breadcrumb has multiple children (even if 2nd is null), it will
      // render the `>` icon, which we don't want if there are no children.
      return this.props.children ? [firstLink, this.props.children] : firstLink;
    }
  }, {
    key: 'renderCloseButton',
    value: function renderCloseButton() {
      if (this.props.closeTray) {
        return _react2.default.createElement(
          _CloseButton2.default,
          { placement: 'start', onClick: this.props.closeTray },
          '\u30AF\u30A4\u30BA\u306B\u623B\u308B'
        );
      }
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { className: styles.nav },
        this.renderCloseButton(),
        _react2.default.createElement(
          'div',
          { className: styles.crumbs },
          _react2.default.createElement(
            _Breadcrumb2.default,
            {
              size: 'small',
              label: '\u3042\u306A\u305F\u306E\u73FE\u5728\u5730\uFF1A'
            },
            this.renderBreadcrumbLinks()
          )
        ),
        this.props.navigateToBuild && _react2.default.createElement(
          _Button2.default,
          { onClick: this.props.navigateToBuild },
          '\u623B\u308B'
        ),
        this.props.renderHeaderMenu()
      );
    }
  }]);
  NavWrapper.displayName = 'NavWrapper'
  ;
  return NavWrapper;
}(_react.Component), _class2.propTypes = {
  children: _CustomPropTypes2.default.Children.oneOf([_BreadcrumbLink2.default]),
  closeTray: _propTypes2.default.func,
  navigateToBanks: _propTypes2.default.func,
  navigateToBuild: _propTypes2.default.func,
  renderHeaderMenu: _propTypes2.default.func
}, _class2.defaultProps = {
  children: null,
  closeTray: null,
  navigateToBanks: null,
  navigateToBuild: null,
  renderHeaderMenu: function renderHeaderMenu() {}
}, _temp)) || _class);
exports.default = NavWrapper;