"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _immutable = require("immutable");

var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));

var _classnames = _interopRequireDefault(require("classnames"));

var _IconMoveLeft = _interopRequireDefault(require("@instructure/ui-icons/lib/Line/IconMoveLeft"));

var _IconMoveRight = _interopRequireDefault(require("@instructure/ui-icons/lib/Line/IconMoveRight"));

var _IconPin = _interopRequireDefault(require("@instructure/ui-icons/lib/Solid/IconPin"));

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

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

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

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

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

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

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

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-common/lib/format-message"));

var _keyboardClickable = _interopRequireDefault(require("../../../../util/keyboardClickable"));

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

var _CustomPropTypes = _interopRequireDefault(require("../../../../util/CustomPropTypes"));

var _constants = require("@instructure/quiz-common/lib/constants");

var _noop = _interopRequireDefault(require("../../../../util/noop"));

var _Pin = _interopRequireDefault(require("./Pin"));

var _theme = _interopRequireDefault(require("./theme"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'etiih',
  template: function template(theme) {
    return "\n\n.etiih_bObp{background-color:".concat(theme.sidebarBackgroundColor || 'inherit', ";border:").concat(theme.sidebarBorderWidth || 'inherit', " solid ").concat(theme.sidebarBorderColor || 'inherit', ";box-sizing:border-box;color:").concat(theme.sidebarColor || 'inherit', ";height:100%;overflow:hidden;position:relative;transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease;width:").concat(theme.sidebarWidthClosed || 'inherit', ";z-index:").concat(theme.sidebarZIndex || 'inherit', "}\n\n.etiih_crKy{display:flex;flex-direction:column;height:100%}\n\n.etiih_eYGv{overflow-x:hidden;overflow-y:auto}\n\n.etiih_eeTU{border-bottom:").concat(theme.sidebarHeaderBorderWidth || 'inherit', " solid ").concat(theme.sidebarHeaderBorderColor || 'inherit', ";border-right:").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.sidebarBackgroundColor || 'inherit', ";text-align:center}\n\n[dir=ltr] .etiih_eeTU,[dir=rtl] .etiih_eeTU{text-align:center}\n\n.etiih_eeTU:hover{border-right:").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.actionableInfoHoverBorderColor || 'inherit', "}\n\n.etiih_difO{color:").concat(theme.descriptionFontColor || 'inherit', ";display:none;font-size:").concat(theme.descriptionFontSize || 'inherit', "}\n\n.etiih_cjDf{display:flex;flex-direction:row;padding:").concat(theme.headerSpacingPadding || 'inherit', "}\n\n.etiih_fuFE{border-bottom:solid ").concat(theme.sidebarHeaderBorderWidth || 'inherit', ";border-color:").concat(theme.sidebarHeaderBorderColor || 'inherit', "}\n\n.etiih_cvRx{margin-left:auto}\n\n.etiih_fwEb{background-color:").concat(theme.pinnedSectionBackgroundColor || 'inherit', ";width:100%}\n\n.etiih_fwEb .etiih_cjDf{flex-grow:1}\n\n.etiih_ftzv{padding-top:").concat(theme.questionNavigatorPadding || 'inherit', "}\n\n.etiih_bObp.etiih_eNNp{opacity:1;transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease;width:").concat(theme.sidebarWidthOpen || 'inherit', "}\n\n.etiih_eNNp .etiih_difO{cursor:pointer;display:inline-block}\n\n.etiih_eNNp .etiih_eeTU,[dir=ltr] .etiih_eNNp .etiih_eeTU,[dir=rtl] .etiih_eNNp .etiih_eeTU{text-align:inherit}\n\n.etiih_eQGE{display:none}\n\n.etiih_eQGE.etiih_cvRx{display:block;margin:auto}\n\n.etiih_eYHq{height:100%}\n\n@media screen and (--phoneBreakPoint){.etiih_eYHq{position:relative}.etiih_bObp{position:absolute;width:0}.etiih_bObp,.etiih_bObp.etiih_eNNp{transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease}.etiih_bObp.etiih_eNNp{display:inline;max-width:100vw;width:100vw}}");
  },
  'sidebar': 'etiih_bObp',
  'sidebarWrapper': 'etiih_crKy',
  'sidebarContent': 'etiih_eYGv',
  'actionableInfo': 'etiih_eeTU',
  'description': 'etiih_difO',
  'headerSpacing': 'etiih_cjDf',
  'headerBottomBorder': 'etiih_fuFE',
  'iconWrapper': 'etiih_cvRx',
  'pinnedSection': 'etiih_fwEb',
  'questionNavigatorPadding': 'etiih_ftzv',
  'sidebarIsOpen': 'etiih_eNNp',
  'sidebarClosed': 'etiih_eQGE',
  'commonContainer': 'etiih_eYHq'
};

var _ref =
/*#__PURE__*/
_react.default.createElement(_Text.default, {
  size: "x-small"
}, _react.default.createElement(_IconPin.default, null));

var Sidebar = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Sidebar, _Component);

  function Sidebar() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Sidebar)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.scrollToTitle = function () {
      _this.props.scrollToItem(null)('title');
    };

    _this.scrollToInfo = function () {
      _this.props.scrollToItem(null)('instructions');
    };

    _this.toggleSidebar = function () {
      var msg = _this.props.sidebarOpen ? "Closed Sidebar" : "Opened Sidebar";

      _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();
        }
      });
    };

    return _this;
  }

  (0, _createClass2.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 _react.default.createElement("div", {
        className: styles.actionableInfo
      }, _react.default.createElement(_Button.default, {
        icon: _IconQuizTitle.default,
        onClick: this.scrollToTitle,
        onKeyDown: _keyboardClickable.default,
        variant: "icon"
      }, _react.default.createElement(_ScreenReaderContent.default, null, "Scroll to title")), _react.default.createElement(_PresentationContent.default, null, _react.default.createElement("span", {
        className: styles.description,
        onClick: this.scrollToTitle,
        tabIndex: "-1"
      }, this.props.title || "Title")));
    }
  }, {
    key: "renderInstructions",
    value: function renderInstructions() {
      return _react.default.createElement("div", {
        className: styles.actionableInfo
      }, _react.default.createElement(_Button.default, {
        icon: _IconQuizInstructions.default,
        onClick: this.scrollToInfo,
        onKeyDown: _keyboardClickable.default,
        "data-automation": "sidebar-instructions-button",
        variant: "icon"
      }, _react.default.createElement(_ScreenReaderContent.default, null, "Scroll to instructions")), _react.default.createElement(_PresentationContent.default, null, _react.default.createElement("span", {
        className: styles.description,
        "data-automation": "sidebar-instructions-text",
        onClick: this.scrollToInfo,
        tabIndex: "-1"
      }, "Instructions")));
    }
  }, {
    key: "renderSidebarHeader",
    value: function renderSidebarHeader() {
      var sidebarOpen = this.props.sidebarOpen;
      var SidebarIcon = sidebarOpen ? _IconMoveLeft.default : _IconMoveRight.default;
      var closedClasses = (0, _classnames.default)(styles.questionNavigatorPadding, (0, _defineProperty2.default)({}, styles.sidebarClosed, !this.props.sidebarOpen));
      var iconClasses = (0, _classnames.default)(styles.iconWrapper, (0, _defineProperty2.default)({}, styles.sidebarClosed, !sidebarOpen));
      return _react.default.createElement("div", {
        className: (0, _classnames.default)(styles.headerSpacing, styles.headerBottomBorder)
      }, _react.default.createElement("div", {
        className: closedClasses
      }, _react.default.createElement(_Text.default, {
        size: "small"
      }, "Question Navigator")), _react.default.createElement("div", {
        className: iconClasses
      }, _react.default.createElement(_Button.default, {
        variant: "icon",
        onClick: this.toggleSidebar,
        size: "small",
        margin: "none",
        "data-automation": "sidebar-toggle-button"
      }, _react.default.createElement(_Text.default, {
        size: "small"
      }, _react.default.createElement(SidebarIcon, null)), _react.default.createElement(_ScreenReaderContent.default, null, sidebarOpen ? "Close Menu" : "Open Menu"))));
    }
  }, {
    key: "renderPinned",
    value: function renderPinned() {
      var _this$props = this.props,
          sidebarOpen = _this$props.sidebarOpen,
          taking = _this$props.taking,
          pinnedItems = _this$props.pinnedItems,
          scrollToItem = _this$props.scrollToItem;

      if (!taking) {
        return;
      }

      var closedClasses = (0, _classnames.default)((0, _defineProperty2.default)({}, styles.sidebarClosed, !sidebarOpen));
      var iconClasses = (0, _classnames.default)(styles.iconWrapper, (0, _defineProperty2.default)({}, styles.sidebarClosed, !sidebarOpen));
      return _react.default.createElement("div", {
        className: (0, _classnames.default)(styles.pinnedSection, styles.headerBottomBorder)
      }, _react.default.createElement("div", {
        className: styles.headerSpacing
      }, _react.default.createElement("div", {
        className: closedClasses
      }, _react.default.createElement(_Text.default, {
        size: "small"
      }, "Pinned Questions")), _react.default.createElement("div", {
        className: iconClasses
      }, _ref)), _react.default.createElement("div", {
        className: closedClasses
      }, pinnedItems.map(function (pin) {
        return _react.default.createElement(_Pin.default, {
          key: pin.sessionItemId,
          scrollToItem: scrollToItem,
          position: pin.position,
          sessionItemId: pin.sessionItemId
        });
      }).toArray()));
    }
  }, {
    key: "render",
    value: function render() {
      var sidebarClassList = (0, _classnames.default)(styles.sidebar, (0, _defineProperty2.default)({}, styles.sidebarIsOpen, this.props.sidebarOpen));
      return _react.default.createElement("div", {
        className: styles.commonContainer
      }, _react.default.createElement("div", {
        className: sidebarClassList,
        onTransitionEnd: this.handleTransitionEnd,
        "data-automation": this.props.sidebarOpen ? 'sdk-sidebar-open' : 'sdk-sidebar-closed'
      }, _react.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: _noop.default,
        id: _constants.SIDEBAR_NAV_ID
      }, this.renderSidebarHeader(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), _react.default.createElement("div", {
        className: styles.sidebarContent
      }, this.props.children))));
    }
  }]);
  Sidebar.displayName = "Sidebar";
  return Sidebar;
}(_react.Component), _class2.propTypes = {
  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.node]).isRequired,
  taking: _propTypes.default.bool,
  scrollToItem: _CustomPropTypes.default.higherOrderFunction.isRequired,
  sidebarOpen: _propTypes.default.bool.isRequired,
  pinnedItems: _reactImmutableProptypes.default.listOf(_propTypes.default.shape({
    sessionItemId: _propTypes.default.string.isRequired,
    position: _propTypes.default.number.isRequired
  })).isRequired,
  role: _propTypes.default.string,
  title: _propTypes.default.string,
  toggleSidebar: _propTypes.default.func.isRequired,
  screenreaderNotification: _propTypes.default.func.isRequired
}, _class2.defaultProps = {
  taking: false,
  title: null,
  pinnedItems: (0, _immutable.List)(),
  role: 'navigation'
}, _temp)) || _class);
exports.default = Sidebar;