"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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

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

var _reactDom = _interopRequireDefault(require("react-dom"));

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

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

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

var _katex = _interopRequireDefault(require("katex"));

var _autoRender = _interopRequireDefault(require("katex/dist/contrib/auto-render.min"));

require("style-loader!css-loader!katex/dist/katex.css");

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

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

var _Flex = _interopRequireWildcard(require("@instructure/ui-layout/lib/components/Flex"));

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

var _PositionSummary = _interopRequireDefault(require("../PositionSummary"));

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

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

var _dec,
    _class,
    _class2,
    _temp,
    _default_da_number = Intl.NumberFormat("da", { style: "decimal" }).format;

var styles = {
  componentId: 'cwwgG',
  template: function template(theme) {
    return "\n\n.cwwgG_kQJA{border-bottom:".concat(theme.bottomBorderWidth || 'inherit', " solid ").concat(theme.bottomBorderColor || 'inherit', ";border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.borderColor || 'inherit', "}\n\n.cwwgG_kQJA:hover{border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.hoverBorderColor || 'inherit', "}\n\n.cwwgG_cdGL{color:").concat(theme.infoHeaderColor || 'inherit', ";display:flex;font-size:").concat(theme.infoHeaderFontSize || 'inherit', "}\n\n.cwwgG_ecuB{width:60%}\n\n.cwwgG_echV{width:40%}\n\n.cwwgG_doeu{font-size:").concat(theme.numberFontSize || 'inherit', ";font-weight:").concat(theme.numberFontWeight || 'inherit', "}\n\n.cwwgG_doeu,.cwwgG_esVF{color:").concat(theme.darkTextColor || 'inherit', "}\n\n.cwwgG_esVF{font-size:").concat(theme.itemBodyFontSize || 'inherit', ";margin-top:").concat(theme.itemBodyMarginTop || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.cwwgG_fBqo{cursor:pointer;position:relative}\n\n.cwwgG_eQGE{margin:0 ").concat(theme.sidebarClosedMargin || 'inherit', ";padding:").concat(theme.sidebarClosedPadding || 'inherit', " 0;text-align:center}\n\n[dir=ltr] .cwwgG_eQGE,[dir=rtl] .cwwgG_eQGE{text-align:center}\n\n.cwwgG_csre{display:flex;justify-content:flex-end}\n\n.cwwgG_cRFW{border-bottom:none}\n\n.cwwgG_eNNp{padding:").concat(theme.sidebarIsOpenPadding || 'inherit', "}\n\n.cwwgG_eNNp.cwwgG_cRFW{margin-left:10%}\n\n.cwwgG_eNNp .cwwgG_fBqo{font-size:").concat(theme.sidebarIsOpenMainTextFontSize || 'inherit', ";margin-top:").concat(theme.mainTextPaddingTop || 'inherit', "}");
  },
  'sidebarItem': 'cwwgG_kQJA',
  'infoHeader': 'cwwgG_cdGL',
  'interactionType': 'cwwgG_ecuB',
  'pointsPossible': 'cwwgG_echV',
  'displayNumber': 'cwwgG_doeu',
  'itemBody': 'cwwgG_esVF',
  'mainText': 'cwwgG_fBqo',
  'sidebarClosed': 'cwwgG_eQGE',
  'pinWrapper': 'cwwgG_csre',
  'inStimulus': 'cwwgG_cRFW',
  'sidebarIsOpen': 'cwwgG_eNNp'
};
window.katex = _katex.default;
var SidebarItem = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(SidebarItem, _Component);

  function SidebarItem() {
    var _getPrototypeOf2;

    var _this;

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

    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)(SidebarItem)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.scrollToItem = function (e) {
      // this can be a real scroll or a oqaat change
      // depending on whether is is oqaat or not
      _this.props.scrollToItem(_this.props.itemId);

      e.stopPropagation();
    };

    _this.renderKatex = function () {
      return (0, _autoRender.default)(_reactDom.default.findDOMNode((0, _assertThisInitialized2.default)(_this)));
    };

    _this.componentDidMount = _this.renderKatex;
    _this.componentDidUpdate = _this.renderKatex;
    return _this;
  }

  (0, _createClass2.default)(SidebarItem, [{
    key: "getPointsText",
    // ============
    //   HELPERS
    // ============
    value: function getPointsText(points) {
      var _s, _n, _t, _i;

      return _s = points, _n = +_s, (_t = +('' + _s).replace(/^[^.]*.?|0+$/g, ''), _i = Math.floor(Math.abs(+_s)), _n === 1 || _t !== 0 && (_i === 0 || _i === 1) ? _default_da_number(points) + " point" : _default_da_number(points) + " point");
    } // =============
    //   RENDERING
    // =============

  }, {
    key: "renderPosition",
    value: function renderPosition() {
      var _this$props = this.props,
          displayPosition = _this$props.displayPosition,
          position = _this$props.position,
          quizEntry = _this$props.quizEntry,
          sidebarOpen = _this$props.sidebarOpen;

      if (!sidebarOpen && quizEntry && quizEntry.sizeOfBank > 1) {
        return _react.default.createElement(_PositionSummary.default, {
          firstPosition: position,
          lastPosition: position + quizEntry.sizeOfBank - 1
        });
      }

      return _react.default.createElement("span", {
        className: styles.displayNumber
      }, displayPosition);
    }
  }, {
    key: "renderButton",
    value: function renderButton() {
      var _this$props2 = this.props,
          displayPosition = _this$props2.displayPosition,
          itemId = _this$props2.itemId;
      return _react.default.createElement(_Button.default, {
        onClick: this.scrollToItem,
        "data-automation-item-id": itemId,
        variant: "link",
        size: "small",
        margin: "xxx-small",
        "data-automation": "sdk-sidebar-item-button"
      }, _react.default.createElement(_AccessibleContent.default, {
        alt: "Rul til element ved position " + displayPosition
      }, this.renderPosition()));
    }
  }, {
    key: "renderClosed",
    value: function renderClosed() {
      var contentWrapperClasses = (0, _classnames.default)(styles.sidebarItem, styles.sidebarClosed, (0, _defineProperty2.default)({}, styles.inStimulus, this.props.inStimulus));
      return _react.default.createElement("div", {
        className: contentWrapperClasses
      }, this.renderButton());
    }
  }, {
    key: "renderOpen",
    value: function renderOpen() {
      var _this$props3 = this.props,
          children = _this$props3.children,
          itemName = _this$props3.itemName,
          inStimulus = _this$props3.inStimulus,
          pointsPossible = _this$props3.pointsPossible;
      var contentWrapperClasses = (0, _classnames.default)(styles.sidebarItem, styles.sidebarIsOpen, (0, _defineProperty2.default)({}, styles.inStimulus, inStimulus));
      return _react.default.createElement("div", {
        className: contentWrapperClasses
      }, _react.default.createElement(_Flex.default, {
        justifyItems: "space-between"
      }, _react.default.createElement(_Flex.FlexItem, null, this.renderButton()), _react.default.createElement(_Flex.FlexItem, {
        grow: true,
        shrink: true,
        onClick: this.scrollToItem,
        tabIndex: "-1"
      }, _react.default.createElement("div", {
        className: styles.mainText
      }, _react.default.createElement("div", {
        className: styles.infoHeader
      }, _react.default.createElement("div", {
        className: styles.interactionType
      }, itemName), _react.default.createElement("div", {
        className: styles.pointsPossible
      }, this.getPointsText(pointsPossible || 0))), _react.default.createElement("div", {
        className: styles.itemBody
      }, this.props.itemBody))), _react.default.createElement(_Flex.FlexItem, null, _react.default.createElement("div", {
        className: styles.pinWrapper
      }, children))));
    }
  }, {
    key: "render",
    value: function render() {
      return this.props.sidebarOpen ? this.renderOpen() : this.renderClosed();
    }
  }]);
  SidebarItem.displayName = "SidebarItem";
  return SidebarItem;
}(_react.Component), _class2.propTypes = {
  // Passed in by Sidebar
  children: _propTypes.default.element,
  displayPosition: _propTypes.default.string.isRequired,
  itemId: _propTypes.default.string.isRequired,
  itemBody: _propTypes.default.string,
  itemName: _propTypes.default.string.isRequired,
  inStimulus: _propTypes.default.bool,
  position: _propTypes.default.number.isRequired,
  pointsPossible: _propTypes.default.number.isRequired,
  quizEntry: _reactImmutableProptypes.default.record,
  // not used on Take
  sidebarOpen: _propTypes.default.bool.isRequired,
  // from connect
  scrollToItem: _propTypes.default.func.isRequired
}, _class2.defaultProps = {
  children: null,
  inStimulus: false,
  itemBody: '',
  quizEntry: null // ============
  //   ACTIONS
  // ============

}, _temp)) || _class);
exports.default = SidebarItem;