"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 _classnames3 = _interopRequireDefault(require("classnames"));

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

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

var _SidebarItem = _interopRequireDefault(require("./SidebarItem"));

var _Stimulus = _interopRequireDefault(require("./Stimulus"));

var _Sidebar = _interopRequireDefault(require("../../../../common/components/layout/sidebar/Sidebar"));

var _generateDisplayPositions = _interopRequireDefault(require("../../../../common/util/generateDisplayPositions"));

var _extractTextFromHtml = _interopRequireDefault(require("quiz-interactions/lib/util/extractTextFromHtml"));

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

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

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'bAyez',
  template: function template(theme) {
    return "\n\n\n.quiz-core__Sidebar--bottomPadding {\n  padding: ".concat(theme.bottomPadding || 'inherit', ";\n}\n\n.quiz-core__Sidebar--hide {\n  display: none;\n}\n\n.quiz-core__Sidebar--sidebarIsOpen .quiz-core__Sidebar--closedItems {\n    display: none;\n  }\n\n.quiz-core__Sidebar--sidebarIsClosed .quiz-core__Sidebar--openItems {\n    display: none;\n  }\n");
  },
  'bottomPadding': 'quiz-core__Sidebar--bottomPadding',
  'hide': 'quiz-core__Sidebar--hide',
  'sidebarIsOpen': 'quiz-core__Sidebar--sidebarIsOpen',
  'closedItems': 'quiz-core__Sidebar--closedItems',
  'sidebarIsClosed': 'quiz-core__Sidebar--sidebarIsClosed',
  'openItems': 'quiz-core__Sidebar--openItems'
};
var BuildingSidebar = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(BuildingSidebar, _Component);

  function BuildingSidebar() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this.scrollToItem = function (_) {
      return function (scrollKey) {
        _this.props.scrollToItem(scrollKey);
      };
    };

    _this.renderItem = function () {
      var isOver = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : _this.props.isOver;
      return function (quizEntry, displayPosition, sidebarIsOpen) {
        return _react.default.createElement(_SidebarItem.default, {
          key: _this.setKey(quizEntry.id),
          ref: _this.setRef(quizEntry.id),
          inStimulus: quizEntry.isInStimulus,
          draggingInSidebar: isOver,
          isTemporary: _this.isTemporary(quizEntry),
          itemBody: _this.getItemBody(quizEntry),
          itemName: _this.getItemName(quizEntry),
          itemId: quizEntry.id,
          pointsPossible: quizEntry.pointsPossible,
          displayPosition: displayPosition,
          quizEntry: quizEntry,
          quizEntries: _this.props.quizEntries,
          sidebarOpen: sidebarIsOpen
        });
      };
    };

    _this.renderBankEntry = function (quizEntry, displayPosition, sidebarIsOpen) {
      if (quizEntry.hasStimulus) {
        return _this.renderStimulus(quizEntry, displayPosition, sidebarIsOpen);
      }

      return _this.renderItem()(quizEntry, displayPosition, sidebarIsOpen);
    };

    _this.storeStartQuizEntriesRef = function (node) {
      _this.startQuizEntries = node;
    };

    _this.storeEndQuizEntriesRef = function (node) {
      _this.endQuizEntries = node;
    };

    return _this;
  }

  (0, _createClass2.default)(BuildingSidebar, [{
    key: "getItemBody",
    value: function getItemBody(quizEntry) {
      switch (quizEntry.entryType) {
        case 'Item':
        case 'BankEntry':
          return (0, _extractTextFromHtml.default)(quizEntry.getItem().itemBody || '');

        case 'Bank':
          return quizEntry.getEntry().title;
      }

      return '';
    }
  }, {
    key: "getItemName",
    value: function getItemName(quizEntry) {
      switch (quizEntry.entryType) {
        case 'Item':
        case 'BankEntry':
          return quizEntry.getItem().getInteractionType().name;

        case 'Bank':
          return "In bank opgenomen inhoud";
      }
    }
  }, {
    key: "isTemporary",
    value: function isTemporary(quizEntry) {
      if (quizEntry.entryType !== 'Item') {
        return false;
      }

      var item = quizEntry.getEntry();
      return item.getWorkingInstance().isTemporary();
    }
  }, {
    key: "setKey",
    value: function setKey(quizEntryId) {
      return "".concat(_constants.SIDEBAR_ITEM_REF, "_").concat(quizEntryId);
    }
  }, {
    key: "setRef",
    value: function setRef(quizEntryId) {
      var _this2 = this;

      return function (node) {
        _this2[_this2.setKey(quizEntryId)] = node;
      };
    } // NOTE: we use a higher order function here only so that we can match
    // the props provided to our common interface from the TakingSidebar.

  }, {
    key: "renderStimulus",
    value: function renderStimulus(quizEntry, displayPosition, sidebarIsOpen) {
      return _react.default.createElement(_Stimulus.default, {
        key: this.setKey(quizEntry.id),
        ref: this.setRef(quizEntry.id),
        displayPosition: displayPosition,
        itemId: quizEntry.id,
        draggingInSidebar: this.props.isOver,
        renderSidebarItem: this.renderItem(),
        quizEntry: quizEntry,
        quizEntries: this.props.quizEntries,
        sidebarOpen: sidebarIsOpen
      });
    }
  }, {
    key: "renderSidebarItems",
    value: function renderSidebarItems(sidebarIsOpen) {
      var _this3 = this;

      var quizEntries = this.props.quizEntries;
      return (0, _generateDisplayPositions.default)(quizEntries).map(function (quizEntry) {
        switch (quizEntry.record.entryType) {
          case 'Item':
          case 'Bank':
            return _this3.renderItem()(quizEntry.record, quizEntry.displayPosition, sidebarIsOpen);

          case 'BankEntry':
            return _this3.renderBankEntry(quizEntry.record, quizEntry.displayPosition, sidebarIsOpen);

          case 'Stimulus':
            return _this3.renderStimulus(quizEntry.record, quizEntry.displayPosition, sidebarIsOpen);
        }
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _classnames2;

      var dndClasses = (0, _classnames3.default)(styles.bottomPadding, (0, _defineProperty2.default)({}, styles.hide, !this.props.isOver));
      var sidebarClasses = (0, _classnames3.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, styles.sidebarIsOpen, this.props.sidebarOpen), (0, _defineProperty2.default)(_classnames2, styles.sidebarIsClosed, !this.props.sidebarOpen), _classnames2));
      return this.props.connectDropTarget(
      /* React DnD requires a native element node like our div below */
      _react.default.createElement("div", {
        className: sidebarClasses
      }, _react.default.createElement(_Sidebar.default, {
        role: this.props.role,
        scrollToItem: this.scrollToItem,
        sidebarOpen: this.props.sidebarOpen,
        toggleSidebar: this.props.toggleSidebar,
        screenreaderNotification: this.props.screenreaderNotification,
        totalPointsPossible: this.props.totalPointsPossible
      }, _react.default.createElement("div", {
        ref: this.storeStartQuizEntriesRef
      }), _react.default.createElement("div", {
        className: styles.closedItems
      }, this.renderSidebarItems(false)), _react.default.createElement("div", {
        className: styles.openItems
      }, this.renderSidebarItems(true)), _react.default.createElement("div", {
        ref: this.storeEndQuizEntriesRef,
        className: dndClasses
      }))));
    }
  }]);
  BuildingSidebar.displayName = "BuildingSidebar";
  return BuildingSidebar;
}(_react.Component), _class2.propTypes = {
  connectDropTarget: _propTypes.default.func.isRequired,
  isOver: _propTypes.default.bool,
  quizEntries: _reactImmutableProptypes.default.list.isRequired,
  role: _propTypes.default.string,
  scrollToItem: _propTypes.default.func.isRequired,
  sidebarOpen: _propTypes.default.bool.isRequired,
  toggleSidebar: _propTypes.default.func.isRequired,
  screenreaderNotification: _propTypes.default.func.isRequired,
  totalPointsPossible: _propTypes.default.number.isRequired
}, _class2.defaultProps = {
  isOver: false,
  role: 'navigation'
}, _temp)) || _class);
exports.default = BuildingSidebar;