"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 _IconMoveStart = _interopRequireDefault(require("@instructure/ui-icons/lib/Line/IconMoveStart"));

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

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 _AccessibleContent = _interopRequireDefault(require("@instructure/ui-a11y/lib/components/AccessibleContent"));

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 _View = _interopRequireDefault(require("@instructure/ui-layout/lib/components/View"));

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

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/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,
    _default_de_number = Intl.NumberFormat("de", { style: "decimal" }).format;

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

      _this.props.screenreaderNotification(msg);

      _this.props.toggleSidebar();
    };

    _this.refWrapper = function (c) {
      _this.sidebarWrapper = c;
    };

    _this.handleBlur = function () {
      var isOpen = _this.props.sidebarOpen;
      setTimeout(function () {
        var focusNotInSidebar = _this.sidebarWrapper !== null && !_this.sidebarWrapper.contains(document.activeElement);

        if (_this.props.shouldCloseOnBlur && 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, "Zum Titel bl\xE4ttern")), _react.default.createElement(_PresentationContent.default, null, _react.default.createElement("span", {
        className: styles.description,
        onClick: this.scrollToTitle,
        tabIndex: "-1"
      }, this.props.title || "Titel")));
    }
  }, {
    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, "Zu den Anweisungen bl\xE4ttern")), _react.default.createElement(_PresentationContent.default, null, _react.default.createElement("span", {
        className: styles.description,
        "data-automation": "sidebar-instructions-text",
        onClick: this.scrollToInfo,
        tabIndex: "-1"
      }, "Anweisungen")));
    }
  }, {
    key: "renderSidebarHeader",
    value: function renderSidebarHeader() {
      var sidebarOpen = this.props.sidebarOpen;
      var SidebarIcon = sidebarOpen ? _IconMoveStart.default : _IconMoveEnd.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"
      }, "Fragenavigator")), _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 ? "Men\xFC schlie\xDFen" : "Men\xFC \xF6ffnen"))));
    }
  }, {
    key: "renderTotalPointsPossible",
    value: function renderTotalPointsPossible() {
      var _s, _n, _i, _v;

      var _this$props = this.props,
          sidebarOpen = _this$props.sidebarOpen,
          totalPointsPossible = _this$props.totalPointsPossible;

      if (typeof totalPointsPossible !== 'number') {
        return null;
      }

      var pointsText = _react.default.createElement(_Text.default, {
        size: "small",
        weight: "bold"
      }, (_s = totalPointsPossible, _n = +_s, (_i = Math.floor(Math.abs(+_s)), _v = (_s + '.').split('.')[1].length, _i === 1 && _v === 0 ? _default_de_number(totalPointsPossible) + " Pkt." : _default_de_number(totalPointsPossible) + "Pkte.")));

      var responsiveText = pointsText;

      if (sidebarOpen) {
        responsiveText = _react.default.createElement(_Text.default, {
          size: "small"
        }, ["Fragenpunkte insgesamt = ", function () {
          return pointsText;
        }()]);
      }

      return _react.default.createElement(_View.default, {
        borderWidth: "0 0 small 0",
        padding: "small x-small",
        textAlign: sidebarOpen ? 'start' : 'center'
      }, _react.default.createElement(_AccessibleContent.default, {
        alt: "Fragenpunkte insgesamt = " + totalPointsPossible
      }, responsiveText));
    }
  }, {
    key: "renderPinned",
    value: function renderPinned() {
      var _this$props2 = this.props,
          sidebarOpen = _this$props2.sidebarOpen,
          taking = _this$props2.taking,
          pinnedItems = _this$props2.pinnedItems,
          scrollToItem = _this$props2.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"
      }, "Angeheftete Fragen")), _react.default.createElement("div", {
        className: iconClasses
      }, _react.default.createElement(_Text.default, {
        size: "x-small"
      }, _react.default.createElement(_IconPin.default, null)))), _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.renderTotalPointsPossible(), 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,
  totalPointsPossible: _propTypes.default.number,
  shouldCloseOnBlur: _propTypes.default.bool
}, _class2.defaultProps = {
  taking: false,
  title: null,
  pinnedItems: (0, _immutable.List)(),
  role: 'navigation',
  totalPointsPossible: null,
  shouldCloseOnBlur: (0, _windowChecks.onPhone)()
}, _temp)) || _class);
exports.default = Sidebar;