"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 _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));

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

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

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

var _Transition = _interopRequireDefault(require("@instructure/ui-motion/lib/components/Transition"));

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

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

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

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

var _presenter = require("../presenter");

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

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'VNxAB',
  template: function template(theme) {
    return "\n\n.Collection__styles__column {\n  display: flex;\n  flex-flow: column;\n  padding: ".concat(theme.columnPadding || 'inherit', ";\n  padding-bottom: 0;\n  align-items: center;\n}\n\n.Collection__styles__itemsContainer {\n  display: none;\n}\n\n.Collection__styles__sidebarIsClosed {\n  display: flex;\n}\n\n.Collection__styles__hideAll {\n  display: none;\n}\n\n.Collection__styles__sidebarIsOpen .Collection__styles__bottomBorder {\n    border-bottom: dashed ").concat(theme.sidebarIsOpenBottomBorderWidth || 'inherit', ";\n    border-color: ").concat(theme.sidebarIsOpenBottomBorderColor || 'inherit', ";\n    padding-left: 0;\n  }\n\n.Collection__styles__sidebarIsOpen .Collection__styles__itemsContainer {\n    display: block;\n  }\n");
  },
  'column': 'Collection__styles__column',
  'itemsContainer': 'Collection__styles__itemsContainer',
  'sidebarIsClosed': 'Collection__styles__sidebarIsClosed',
  'hideAll': 'Collection__styles__hideAll',
  'sidebarIsOpen': 'Collection__styles__sidebarIsOpen',
  'bottomBorder': 'Collection__styles__bottomBorder'
};
var Collection = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Collection, _Component);

  function Collection() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this.handleSidebarHideItems = function () {
      _this.props.setSidebarStimulusIsShowing(_this.props.stimulusId, false);
    };

    _this.handleSidebarShowItems = function () {
      _this.props.setSidebarStimulusIsShowing(_this.props.stimulusId, true);
    };

    return _this;
  }

  (0, _createClass2.default)(Collection, [{
    key: "shouldDisplayAllItems",
    value: function shouldDisplayAllItems() {
      return this.props.itemCollection.size <= _presenter.DISPLAY_AS_SUMMARY_LIMIT;
    }
  }, {
    key: "renderItems",
    // =============
    //   RENDERING
    // =============
    value: function renderItems() {
      var _this2 = this,
          _classNames2;

      var _this$props = this.props,
          firstPosition = _this$props.firstPosition,
          isOver = _this$props.isOver,
          isShowingItems = _this$props.isShowingItems,
          itemCollection = _this$props.itemCollection,
          sidebarOpen = _this$props.sidebarOpen;

      var borderStyle = function borderStyle(isLast) {
        var _classNames;

        return (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.itemsContainer, true), (0, _defineProperty2.default)(_classNames, styles.sidebarIsClosed, !sidebarOpen), (0, _defineProperty2.default)(_classNames, styles.bottomBorder, (!isOver || !sidebarOpen) && !isLast), _classNames));
      };

      var nextDisplayPosition = firstPosition;
      var itemComponents = itemCollection.toArray().map(function (item, i) {
        var displayPosition = nextDisplayPosition;
        nextDisplayPosition += item.displayPositionSlots;
        return _react.default.createElement("div", {
          key: item.id,
          className: borderStyle(i === itemCollection.size - 1)
        }, _this2.props.renderSidebarItem(item, displayPosition, sidebarOpen));
      });
      var sidebarItemsStyles = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, styles.column, isShowingItems && !this.shouldDisplayAllItems() && !sidebarOpen), (0, _defineProperty2.default)(_classNames2, styles.hideAll, isShowingItems && sidebarOpen || this.shouldDisplayAllItems() || sidebarOpen), _classNames2));
      var transitionType = isShowingItems ? 'slide-down' : 'slide-up';
      return _react.default.createElement(_Transition.default, {
        in: isShowingItems || this.shouldDisplayAllItems(),
        type: transitionType
      }, _react.default.createElement("div", {
        className: styles.sidebarIsOpen
      }, _react.default.createElement("div", {
        className: sidebarItemsStyles
      }, _react.default.createElement(_Button.default, {
        variant: "icon",
        onClick: this.handleSidebarHideItems,
        icon: _IconArrowOpenUp.default
      }, _react.default.createElement(_ScreenReaderContent.default, null, "Stimulusitems samenvouwen"))), _react.default.createElement("div", null, itemComponents)));
    }
  }, {
    key: "renderItemSummaryOnClosedSidear",
    value: function renderItemSummaryOnClosedSidear() {
      var _this$props2 = this.props,
          firstPosition = _this$props2.firstPosition,
          itemCollection = _this$props2.itemCollection,
          isShowingItems = _this$props2.isShowingItems;
      var transitionType = !isShowingItems ? 'slide-up' : 'slide-down';
      return _react.default.createElement(_Transition.default, {
        in: !isShowingItems,
        type: transitionType
      }, _react.default.createElement("div", {
        className: (0, _classnames.default)([styles.sidebarIsOpen, styles.column])
      }, _react.default.createElement(_PositionSummary.default, {
        firstPosition: firstPosition,
        lastPosition: firstPosition + itemCollection.size - 1
      }), _react.default.createElement(_Button.default, {
        variant: "icon",
        onClick: this.handleSidebarShowItems,
        icon: _IconArrowOpenDown.default
      }, _react.default.createElement(_ScreenReaderContent.default, null, "Stimulusitems uitvouwen"))));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          isShowingItems = _this$props3.isShowingItems,
          sidebarOpen = _this$props3.sidebarOpen;
      var hideAllClass = (0, _classnames.default)((0, _defineProperty2.default)({}, styles.hideAll, sidebarOpen && !isShowingItems && !this.shouldDisplayAllItems()));
      var hideItemsClass = (0, _classnames.default)((0, _defineProperty2.default)({}, styles.hideAll, this.shouldDisplayAllItems() || isShowingItems));
      var hideSummaryClass = (0, _classnames.default)((0, _defineProperty2.default)({}, styles.hideAll, !this.shouldDisplayAllItems() && !isShowingItems && !sidebarOpen));
      return _react.default.createElement("div", {
        className: hideAllClass
      }, _react.default.createElement("div", {
        className: hideItemsClass
      }, this.renderItemSummaryOnClosedSidear()), _react.default.createElement("div", {
        className: hideSummaryClass
      }, this.renderItems()));
    }
  }]);
  Collection.displayName = "Collection";
  return Collection;
}(_react.Component), _class2.propTypes = {
  // Passed in by Sidebar
  firstPosition: _propTypes.default.number.isRequired,
  isOver: _propTypes.default.bool.isRequired,

  /* This is used for when the stimulus is being dragged in build */
  renderSidebarItem: _propTypes.default.func.isRequired,
  sidebarOpen: _propTypes.default.bool.isRequired,
  itemCollection: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record).isRequired,
  isShowingItems: _propTypes.default.bool,
  stimulusId: _propTypes.default.string.isRequired,
  // set in connect
  setSidebarStimulusIsShowing: _propTypes.default.func.isRequired
}, _class2.defaultProps = {
  isShowingItems: false
}, _temp)) || _class);
exports.default = Collection;