'use strict';

exports.__esModule = true;

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

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

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ = require('./..');

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

/**
 * Topbar Mobile
 * @param props
 */
var _ref = _react2.default.createElement(_.ListSeparator, null);

var TopbarMobile = function (_React$Component) {
  (0, _inherits3.default)(TopbarMobile, _React$Component);

  function TopbarMobile() {
    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, TopbarMobile);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
      isMobileOpen: false
    }, _this.handleClick = function () {
      _this.setState({
        isMobileOpen: !_this.state.isMobileOpen
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  TopbarMobile.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        children = _props.children,
        brandNode = _props.brandNode;
    var isMobileOpen = this.state.isMobileOpen;

    var mobileButton = _react2.default.createElement(_.Icon, {
      name: 'list-menu_20',
      className: 'cui-top-bar__mobile-menu-button',
      onClick: function onClick() {
        return _this2.setState({
          isMobileOpen: !isMobileOpen
        });
      },
      onKeyPress: this.handleKeyPress,
      tabIndex: 0,
      'aria-pressed': isMobileOpen,
      role: 'button'
    });
    /* eslint-disable */
    return _react2.default.createElement(
      'div',
      null,
      !isMobileOpen && mobileButton,
      _react2.default.createElement(
        'div',
        {
          className: 'cui-top-bar__mobile cui-tb-mobile' + ('' + (isMobileOpen ? ' open' : '')),
          onClick: this.handleClick },
        _react2.default.createElement(_.Icon, {
          name: 'cancel_20',
          className: 'cui-tb-mobile__close',
          tabIndex: 0,
          'aria-pressed': isMobileOpen,
          role: 'button'
        }),
        brandNode,
        _ref,
        _react2.default.createElement(
          'nav',
          { className: 'cui-tb-mobile__nav' },
          children
        )
      ),
      _react2.default.createElement('div', {
        className: 'cui-tb-mobile__mask' + ('' + (isMobileOpen ? ' open' : '')),
        onClick: this.handleClick,
        role: 'none'
      })
    );
  };

  return TopbarMobile;
}(_react2.default.Component);
/* eslint-enable */

TopbarMobile.displayName = 'TopbarMobile';
exports.default = TopbarMobile;


TopbarMobile.defaultProps = {
  children: null,
  brandNode: null
};
module.exports = exports['default'];