'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 "array-callback-return": "warn" */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames3 = require('classnames');

var _classnames4 = _interopRequireDefault(_classnames3);

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

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

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

var _lib2 = _interopRequireDefault(_lib);

var _SidebarItem = require('./SidebarItem');

var _SidebarItem2 = _interopRequireDefault(_SidebarItem);

var _Stimulus = require('./Stimulus');

var _Stimulus2 = _interopRequireDefault(_Stimulus);

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

var _Sidebar2 = _interopRequireDefault(_Sidebar);

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

var _generateDisplayPositions2 = _interopRequireDefault(_generateDisplayPositions);

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

var _extractTextFromHtml2 = _interopRequireDefault(_extractTextFromHtml);

var _theme = require('./theme');

var _theme2 = _interopRequireDefault(_theme);

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

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var styles = {
  template: function template(theme) {
    return '/*  imported from styles.css  */\n\n/* this class is to allow space for dragging an item\nbelow a stimulus at the bottom of a long quiz */\n.Sidebar__styles__bottomPadding {\n  padding: ' + theme.bottomPadding + ';\n}\n\n.Sidebar__styles__hide {\n  display: none;\n}\n\n.Sidebar__styles__sidebarIsOpen .Sidebar__styles__closedItems {\n    display: none;\n  }\n\n.Sidebar__styles__sidebarIsClosed .Sidebar__styles__openItems {\n    display: none;\n  }\n';
  },
  'bottomPadding': 'Sidebar__styles__bottomPadding',
  'hide': 'Sidebar__styles__hide',
  'sidebarIsOpen': 'Sidebar__styles__sidebarIsOpen',
  'closedItems': 'Sidebar__styles__closedItems',
  'sidebarIsClosed': 'Sidebar__styles__sidebarIsClosed',
  'openItems': 'Sidebar__styles__openItems'
};
var BuildingSidebar = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(BuildingSidebar, _Component);

  function BuildingSidebar() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = BuildingSidebar.__proto__ || Object.getPrototypeOf(BuildingSidebar)).call.apply(_ref, [this].concat(args))), _this), _this.scrollToItem = function (_) {
      return function (scrollKey) {
        _this.props.scrollToItem(scrollKey);
      };
    }, _this.renderItem = function () {
      var isOver = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.isOver;
      return function (quizEntry, displayPosition, sidebarIsOpen) {
        return _react2.default.createElement(_SidebarItem2.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;
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(BuildingSidebar, [{
    key: 'getItemBody',
    value: function getItemBody(quizEntry) {
      switch (quizEntry.entryType) {
        case 'Item':
        case 'BankEntry':
          return (0, _extractTextFromHtml2.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 'Bankat inneh\xE5ll';
      }
    }
  }, {
    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 _constants.SIDEBAR_ITEM_REF + '_' + 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.


    // need to pass isOver this way to force a rerender when it changes,
    // since only this function is passed down for rendering items in stimuli

  }, {
    key: 'renderStimulus',
    value: function renderStimulus(quizEntry, displayPosition, sidebarIsOpen) {
      return _react2.default.createElement(_Stimulus2.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, _generateDisplayPositions2.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, _classnames4.default)(styles.bottomPadding, (0, _defineProperty3.default)({}, styles.hide, !this.props.isOver));
      var sidebarClasses = (0, _classnames4.default)((_classnames2 = {}, (0, _defineProperty3.default)(_classnames2, styles.sidebarIsOpen, this.props.sidebarOpen), (0, _defineProperty3.default)(_classnames2, styles.sidebarIsClosed, !this.props.sidebarOpen), _classnames2));

      return this.props.connectDropTarget(
      /* React DnD requires a native element node like our div below */
      _react2.default.createElement(
        'div',
        { className: sidebarClasses },
        _react2.default.createElement(
          _Sidebar2.default,
          {
            role: this.props.role,
            scrollToItem: this.scrollToItem,
            sidebarOpen: this.props.sidebarOpen,
            toggleSidebar: this.props.toggleSidebar,
            screenreaderNotification: this.props.screenreaderNotification
          },
          _react2.default.createElement('div', { ref: this.storeStartQuizEntriesRef }),
          _react2.default.createElement(
            'div',
            { className: styles.closedItems },
            this.renderSidebarItems(false)
          ),
          _react2.default.createElement(
            'div',
            { className: styles.openItems },
            this.renderSidebarItems(true)
          ),
          _react2.default.createElement('div', { ref: this.storeEndQuizEntriesRef, className: dndClasses })
        )
      ));
    }
  }]);
  BuildingSidebar.displayName = 'BuildingSidebar'
  ;
  return BuildingSidebar;
}(_react.Component), _class2.propTypes = {
  connectDropTarget: _propTypes2.default.func.isRequired,
  isOver: _propTypes2.default.bool,
  quizEntries: _reactImmutableProptypes2.default.list.isRequired,
  role: _propTypes2.default.string,
  scrollToItem: _propTypes2.default.func.isRequired,
  sidebarOpen: _propTypes2.default.bool.isRequired,
  toggleSidebar: _propTypes2.default.func.isRequired,
  screenreaderNotification: _propTypes2.default.func.isRequired
}, _class2.defaultProps = {
  isOver: false,
  role: 'navigation'
}, _temp2)) || _class);
exports.default = BuildingSidebar;