'use strict';

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

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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, _temp2; /* eslint "jsx-a11y/click-events-have-key-events": "warn" */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _immutable = require('immutable');

var _reactImmutableProptypes = require('react-immutable-proptypes');

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _IconMoveLeftLine = require('instructure-icons/lib/Line/IconMoveLeftLine');

var _IconMoveLeftLine2 = _interopRequireDefault(_IconMoveLeftLine);

var _IconMoveRightLine = require('instructure-icons/lib/Line/IconMoveRightLine');

var _IconMoveRightLine2 = _interopRequireDefault(_IconMoveRightLine);

var _IconPinSolid = require('instructure-icons/lib/Solid/IconPinSolid');

var _IconPinSolid2 = _interopRequireDefault(_IconPinSolid);

var _IconQuizInstructions = require('@instructure/ui-icons/lib/Line/IconQuizInstructions');

var _IconQuizInstructions2 = _interopRequireDefault(_IconQuizInstructions);

var _IconQuizTitle = require('@instructure/ui-icons/lib/Line/IconQuizTitle');

var _IconQuizTitle2 = _interopRequireDefault(_IconQuizTitle);

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

var _Button2 = _interopRequireDefault(_Button);

var _PresentationContent = require('@instructure/ui-a11y/lib/components/PresentationContent');

var _PresentationContent2 = _interopRequireDefault(_PresentationContent);

var _ScreenReaderContent = require('@instructure/ui-a11y/lib/components/ScreenReaderContent');

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

var _Text = require('@instructure/ui-elements/lib/components/Text');

var _Text2 = _interopRequireDefault(_Text);

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

var _lib2 = _interopRequireDefault(_lib);

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _keyboardClickable = require('../../../../util/keyboardClickable');

var _keyboardClickable2 = _interopRequireDefault(_keyboardClickable);

var _windowChecks = require('../../../../util/windowChecks');

var _CustomPropTypes = require('../../../../util/CustomPropTypes');

var _CustomPropTypes2 = _interopRequireDefault(_CustomPropTypes);

var _constants = require('../../../../../constants');

var _noop = require('../../../../util/noop');

var _noop2 = _interopRequireDefault(_noop);

var _Pin = require('./Pin');

var _Pin2 = _interopRequireDefault(_Pin);

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.Sidebar__styles__sidebar {\n  box-sizing: border-box;\n  width: ' + theme.sidebarWidthClosed + ';\n  background-color: ' + theme.sidebarBackgroundColor + ';\n  border: ' + theme.sidebarBorderWidth + ' solid ' + theme.sidebarBorderColor + ';\n  color: ' + theme.sidebarColor + ';\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n  z-index: ' + theme.sidebarZIndex + ';\n  transition: ' + theme.sidebarTransitionDuration + ' ease;\n}\n\n.Sidebar__styles__sidebarWrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.Sidebar__styles__sidebarContent {\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.Sidebar__styles__actionableInfo {\n  border-bottom: ' + theme.sidebarHeaderBorderWidth + ' solid ' + theme.sidebarHeaderBorderColor + ';\n  border-right: ' + theme.actionableInfoBorderWidth + ' solid ' + theme.sidebarBackgroundColor + ';\n  text-align: center;\n}\n\n[dir="ltr"] .Sidebar__styles__actionableInfo {\n  text-align: center;\n}\n\n[dir="rtl"] .Sidebar__styles__actionableInfo {\n  text-align: center;\n}\n\n.Sidebar__styles__actionableInfo:hover {\n  border-right: ' + theme.actionableInfoBorderWidth + ' solid ' + theme.actionableInfoHoverBorderColor + ';\n}\n\n.Sidebar__styles__description {\n  color: ' + theme.descriptionFontColor + ';\n  display: none;\n  font-size: ' + theme.descriptionFontSize + ';\n}\n\n.Sidebar__styles__headerSpacing {\n  display: flex;\n  flex-direction: row;\n  padding: ' + theme.headerSpacingPadding + ';\n}\n\n.Sidebar__styles__headerBottomBorder {\n  border-bottom: solid ' + theme.sidebarHeaderBorderWidth + ';\n  border-color: ' + theme.sidebarHeaderBorderColor + ';\n}\n\n.Sidebar__styles__iconWrapper {\n  margin-left: auto;\n}\n\n.Sidebar__styles__pinnedSection {\n  width: 100%;\n  background-color: ' + theme.pinnedSectionBackgroundColor + ';\n}\n\n.Sidebar__styles__pinnedSection .Sidebar__styles__headerSpacing {\n  flex-grow: 1;\n}\n\n.Sidebar__styles__questionNavigatorPadding {\n  padding-top: ' + theme.questionNavigatorPadding + ';\n}\n\n/* ========================= */\n/* sidebarIsOpen overrides */\n/* ========================= */\n\n.Sidebar__styles__sidebar.Sidebar__styles__sidebarIsOpen {\n  width: ' + theme.sidebarWidthOpen + ';\n  transition: ' + theme.sidebarTransitionDuration + ' ease;\n  opacity: 1;\n}\n\n.Sidebar__styles__sidebarIsOpen .Sidebar__styles__description {\n    cursor: pointer;\n    display: inline-block;\n  }\n\n.Sidebar__styles__sidebarIsOpen .Sidebar__styles__actionableInfo {\n    text-align: inherit;\n  }\n\n[dir="ltr"] .Sidebar__styles__sidebarIsOpen .Sidebar__styles__actionableInfo {\n    text-align: inherit;\n  }\n\n[dir="rtl"] .Sidebar__styles__sidebarIsOpen .Sidebar__styles__actionableInfo {\n    text-align: inherit;\n  }\n\n.Sidebar__styles__sidebarClosed {\n  display: none;\n}\n\n.Sidebar__styles__sidebarClosed.Sidebar__styles__iconWrapper {\n  margin: auto;\n  display: block;\n}\n\n.Sidebar__styles__commonContainer {\n  height: 100%;\n}\n\n/* ========================= */\n/*   screen size overrides   */\n/* ========================= */\n\n@media screen and (--phoneBreakPoint) {\n  .Sidebar__styles__commonContainer {\n    position: relative;\n  }\n\n  .Sidebar__styles__sidebar {\n    position: absolute;\n    width: 0;\n    transition: ' + theme.sidebarTransitionDuration + ' ease;\n  }\n\n  .Sidebar__styles__sidebar.Sidebar__styles__sidebarIsOpen {\n    display: inline;\n    width: 100vw;\n    max-width: 100vw;\n    transition: ' + theme.sidebarTransitionDuration + ' ease;\n  }\n}\n';
  },
  'sidebar': 'Sidebar__styles__sidebar',
  'sidebarWrapper': 'Sidebar__styles__sidebarWrapper',
  'sidebarContent': 'Sidebar__styles__sidebarContent',
  'actionableInfo': 'Sidebar__styles__actionableInfo',
  'description': 'Sidebar__styles__description',
  'headerSpacing': 'Sidebar__styles__headerSpacing',
  'headerBottomBorder': 'Sidebar__styles__headerBottomBorder',
  'iconWrapper': 'Sidebar__styles__iconWrapper',
  'pinnedSection': 'Sidebar__styles__pinnedSection',
  'questionNavigatorPadding': 'Sidebar__styles__questionNavigatorPadding',
  'sidebarIsOpen': 'Sidebar__styles__sidebarIsOpen',
  'sidebarClosed': 'Sidebar__styles__sidebarClosed',
  'commonContainer': 'Sidebar__styles__commonContainer'
};
var Sidebar = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(Sidebar, _Component);

  function Sidebar() {
    var _ref;

    var _temp, _this, _ret;

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

    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, (_ref = Sidebar.__proto__ || Object.getPrototypeOf(Sidebar)).call.apply(_ref, [this].concat(args))), _this), _this.scrollToTitle = function () {
      _this.props.scrollToItem(null)('title');
    }, _this.scrollToInfo = function () {
      _this.props.scrollToItem(null)('instructions');
    }, _this.toggleSidebar = function () {
      var msg = _this.props.sidebarOpen ? 'Gesloten zijbalk' : 'Geopende zijbalk';
      _this.props.screenreaderNotification(msg);
      _this.props.toggleSidebar();
    }, _this.refWrapper = function (c) {
      _this.sidebarWrapper = c;
    }, _this.onPhone = _windowChecks.onPhone, _this.handleBlur = function () {
      var isOpen = _this.props.sidebarOpen;
      setTimeout(function () {
        var focusNotInSidebar = _this.sidebarWrapper !== null && !_this.sidebarWrapper.contains(document.activeElement);
        if (_this.onPhone() && focusNotInSidebar && isOpen) {
          _this.toggleSidebar();
        }
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  // this is to allow stubbing the onPhone method


  (0, _createClass3.default)(Sidebar, [{
    key: 'handleTransitionEnd',
    value: function handleTransitionEnd() {
      // when the sidebar finishes its transition, fire a "windowResized" event
      // so that elements (such as hotspot canvas) know to update their size
      var resizeEvent = window.document.createEvent('UIEvents');
      resizeEvent.initUIEvent('resize', true, false, window, 0);
      window.dispatchEvent(resizeEvent);
    }

    // ============
    //  RENDERING
    // ============

  }, {
    key: 'renderTitle',
    value: function renderTitle() {
      return _react2.default.createElement(
        'div',
        { className: styles.actionableInfo },
        _react2.default.createElement(
          _Button2.default,
          {
            icon: _IconQuizTitle2.default,
            onClick: this.scrollToTitle,
            onKeyDown: _keyboardClickable2.default,
            variant: 'icon'
          },
          _react2.default.createElement(
            _ScreenReaderContent2.default,
            null,
            'Ga naar titel'
          )
        ),
        _react2.default.createElement(
          _PresentationContent2.default,
          null,
          _react2.default.createElement(
            'span',
            {
              className: styles.description,
              onClick: this.scrollToTitle
            },
            this.props.title
          )
        )
      );
    }
  }, {
    key: 'renderInstructions',
    value: function renderInstructions() {
      return _react2.default.createElement(
        'div',
        { className: styles.actionableInfo },
        _react2.default.createElement(
          _Button2.default,
          {
            icon: _IconQuizInstructions2.default,
            onClick: this.scrollToInfo,
            onKeyDown: _keyboardClickable2.default,
            'data-automation': 'sidebar-instructions-button',
            variant: 'icon'
          },
          _react2.default.createElement(
            _ScreenReaderContent2.default,
            null,
            'Ga naar instructies'
          )
        ),
        _react2.default.createElement(
          _PresentationContent2.default,
          null,
          _react2.default.createElement(
            'span',
            {
              className: styles.description,
              'data-automation': 'sidebar-instructions-text',
              onClick: this.scrollToInfo
            },
            'Instructies'
          )
        )
      );
    }
  }, {
    key: 'renderSidebarHeader',
    value: function renderSidebarHeader() {
      var sidebarOpen = this.props.sidebarOpen;

      var SidebarIcon = sidebarOpen ? _IconMoveLeftLine2.default : _IconMoveRightLine2.default;
      var closedClasses = (0, _classnames2.default)(styles.questionNavigatorPadding, (0, _defineProperty3.default)({}, styles.sidebarClosed, !this.props.sidebarOpen));
      var iconClasses = (0, _classnames2.default)(styles.iconWrapper, (0, _defineProperty3.default)({}, styles.sidebarClosed, !sidebarOpen));

      return _react2.default.createElement(
        'div',
        { className: (0, _classnames2.default)(styles.headerSpacing, styles.headerBottomBorder) },
        _react2.default.createElement(
          'div',
          { className: closedClasses },
          _react2.default.createElement(
            _Text2.default,
            { size: 'small' },
            'Vragennavigator'
          )
        ),
        _react2.default.createElement(
          'div',
          { className: iconClasses },
          _react2.default.createElement(
            _Button2.default,
            {
              variant: 'icon',
              onClick: this.toggleSidebar,
              size: 'small',
              margin: 'none',
              'data-automation': 'sidebar-toggle-button'
            },
            _react2.default.createElement(
              _Text2.default,
              { size: 'small' },
              _react2.default.createElement(SidebarIcon, null)
            ),
            _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              sidebarOpen ? 'Menu sluiten' : 'Menu openen'
            )
          )
        )
      );
    }
  }, {
    key: 'renderPinned',
    value: function renderPinned() {
      var _props = this.props,
          sidebarOpen = _props.sidebarOpen,
          taking = _props.taking,
          pinnedItems = _props.pinnedItems,
          scrollToItem = _props.scrollToItem;


      if (!taking) {
        return;
      }

      var closedClasses = (0, _classnames2.default)((0, _defineProperty3.default)({}, styles.sidebarClosed, !sidebarOpen));
      var iconClasses = (0, _classnames2.default)(styles.iconWrapper, (0, _defineProperty3.default)({}, styles.sidebarClosed, !sidebarOpen));

      return _react2.default.createElement(
        'div',
        { className: (0, _classnames2.default)(styles.pinnedSection, styles.headerBottomBorder) },
        _react2.default.createElement(
          'div',
          { className: styles.headerSpacing },
          _react2.default.createElement(
            'div',
            { className: closedClasses },
            _react2.default.createElement(
              _Text2.default,
              { size: 'small' },
              'Vastgezette vragen'
            )
          ),
          _react2.default.createElement(
            'div',
            { className: iconClasses },
            _react2.default.createElement(
              _Text2.default,
              { size: 'x-small' },
              _react2.default.createElement(_IconPinSolid2.default, null)
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: closedClasses },
          pinnedItems.map(function (pin) {
            return _react2.default.createElement(_Pin2.default, {
              key: pin.sessionItemId,
              scrollToItem: scrollToItem,
              position: pin.position,
              sessionItemId: pin.sessionItemId
            });
          }).toArray()
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var sidebarClassList = (0, _classnames2.default)(styles.sidebar, (0, _defineProperty3.default)({}, styles.sidebarIsOpen, this.props.sidebarOpen));

      return _react2.default.createElement(
        'div',
        { className: styles.commonContainer },
        _react2.default.createElement(
          'div',
          { className: sidebarClassList, onTransitionEnd: this.handleTransitionEnd },
          _react2.default.createElement(
            'div',
            {
              className: styles.sidebarWrapper,
              ref: this.refWrapper,
              role: this.props.role,
              onBlur: this.handleBlur
              // for some reason, without a click handler here, a random item will
              // take the click and scroll to itself when the nav is clicked by SR
              , onClick: _noop2.default,
              id: _constants.SIDEBAR_NAV_ID
            },
            this.renderSidebarHeader(),
            this.renderPinned(),
            this.renderTitle(),
            this.renderInstructions(),
            _react2.default.createElement(
              'div',
              { className: styles.sidebarContent },
              this.props.children
            )
          )
        )
      );
    }
  }]);
  Sidebar.displayName = 'Sidebar'
  ;
  return Sidebar;
}(_react.Component), _class2.propTypes = {
  children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.arrayOf(_propTypes2.default.element), _propTypes2.default.node]).isRequired,
  taking: _propTypes2.default.bool,
  scrollToItem: _CustomPropTypes2.default.higherOrderFunction.isRequired,
  sidebarOpen: _propTypes2.default.bool.isRequired,
  pinnedItems: _reactImmutableProptypes2.default.listOf(_propTypes2.default.shape({
    sessionItemId: _propTypes2.default.string.isRequired,
    position: _propTypes2.default.number.isRequired
  })).isRequired,
  role: _propTypes2.default.string,
  title: _propTypes2.default.string,
  toggleSidebar: _propTypes2.default.func.isRequired,
  screenreaderNotification: _propTypes2.default.func.isRequired
}, _class2.defaultProps = {
  taking: false,
  title: 'Titel',
  pinnedItems: (0, _immutable.List)(),
  role: 'navigation'
}, _temp2)) || _class);
exports.default = Sidebar;