'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;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _IconArrowOpenDownLine = require('instructure-icons/lib/Line/IconArrowOpenDownLine');

var _IconArrowOpenDownLine2 = _interopRequireDefault(_IconArrowOpenDownLine);

var _IconArrowOpenUpLine = require('instructure-icons/lib/Line/IconArrowOpenUpLine');

var _IconArrowOpenUpLine2 = _interopRequireDefault(_IconArrowOpenUpLine);

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

var _Transition2 = _interopRequireDefault(_Transition);

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

var _Button2 = _interopRequireDefault(_Button);

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

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

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

var _lib2 = _interopRequireDefault(_lib);

var _PositionSummary = require('../../PositionSummary');

var _PositionSummary2 = _interopRequireDefault(_PositionSummary);

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

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

var _formatMessage2 = _interopRequireDefault(_formatMessage);

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

var _theme2 = _interopRequireDefault(_theme);

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

var styles = {
  template: function template(theme) {
    return '/*  imported from styles.css  */\n\n._2JrqQy0yBeylPfPA8ESMUA {\n  display: flex;\n  flex-flow: column;\n  padding: ' + theme.columnPadding + ';\n  padding-bottom: 0;\n  align-items: center;\n}\n\n._3XqxOCOqRfCtmKkjeLqYr7 {\n  display: none;\n}\n\n._1EQhRB9Qx6RQbiKZ_h1RdX {\n  display: flex;\n}\n\n._1wUel2LeP1LdxkM4gdCKgr {\n  display: none;\n}\n\n._3LczNczQ3gJSFp-23djeqR ._1szRmfqI2oXw_JCdcoEXmx {\n    border-bottom: dashed ' + theme.sidebarIsOpenBottomBorderWidth + ';\n    border-color: ' + theme.sidebarIsOpenBottomBorderColor + ';\n    padding-left: 0;\n  }\n\n._3LczNczQ3gJSFp-23djeqR ._3XqxOCOqRfCtmKkjeLqYr7 {\n    display: block;\n  }\n';
  },
  'column': '_2JrqQy0yBeylPfPA8ESMUA',
  'itemsContainer': '_3XqxOCOqRfCtmKkjeLqYr7',
  'sidebarIsClosed': '_1EQhRB9Qx6RQbiKZ_h1RdX',
  'hideAll': '_1wUel2LeP1LdxkM4gdCKgr',
  'sidebarIsOpen': '_3LczNczQ3gJSFp-23djeqR',
  'bottomBorder': '_1szRmfqI2oXw_JCdcoEXmx'
};
var Collection = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(Collection, _Component);

  function Collection() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = Collection.__proto__ || Object.getPrototypeOf(Collection)).call.apply(_ref, [this].concat(args))), _this), _this.handleSidebarHideItems = function () {
      _this.props.setSidebarStimulusIsShowing(_this.props.stimulusId, false);
    }, _this.handleSidebarShowItems = function () {
      _this.props.setSidebarStimulusIsShowing(_this.props.stimulusId, true);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.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 _props = this.props,
          firstPosition = _props.firstPosition,
          isOver = _props.isOver,
          isShowingItems = _props.isShowingItems,
          itemCollection = _props.itemCollection,
          sidebarOpen = _props.sidebarOpen;

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

        return (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, styles.itemsContainer, true), (0, _defineProperty3.default)(_classNames, styles.sidebarIsClosed, !sidebarOpen), (0, _defineProperty3.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 _react2.default.createElement(
          'div',
          { key: item.id, className: borderStyle(i === itemCollection.size - 1) },
          _this2.props.renderSidebarItem(item, displayPosition, sidebarOpen)
        );
      });

      var sidebarItemsStyles = (0, _classnames2.default)((_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, styles.column, isShowingItems && !this.shouldDisplayAllItems() && !sidebarOpen), (0, _defineProperty3.default)(_classNames2, styles.hideAll, isShowingItems && sidebarOpen || this.shouldDisplayAllItems() || sidebarOpen), _classNames2));
      var transitionType = isShowingItems ? 'slide-down' : 'slide-up';

      return _react2.default.createElement(
        _Transition2.default,
        {
          'in': isShowingItems || this.shouldDisplayAllItems(),
          type: transitionType
        },
        _react2.default.createElement(
          'div',
          { className: styles.sidebarIsOpen },
          _react2.default.createElement(
            'div',
            { className: sidebarItemsStyles },
            _react2.default.createElement(
              _Button2.default,
              {
                variant: 'icon',
                onClick: this.handleSidebarHideItems,
                icon: _IconArrowOpenUpLine2.default
              },
              _react2.default.createElement(
                _ScreenReaderContent2.default,
                null,
                (0, _formatMessage2.default)('Collapse stimulus items')
              )
            )
          ),
          _react2.default.createElement(
            'div',
            null,
            itemComponents
          )
        )
      );
    }
  }, {
    key: 'renderItemSummaryOnClosedSidear',
    value: function renderItemSummaryOnClosedSidear() {
      var _props2 = this.props,
          firstPosition = _props2.firstPosition,
          itemCollection = _props2.itemCollection,
          isShowingItems = _props2.isShowingItems;

      var transitionType = !isShowingItems ? 'slide-up' : 'slide-down';

      return _react2.default.createElement(
        _Transition2.default,
        {
          'in': !isShowingItems,
          type: transitionType
        },
        _react2.default.createElement(
          'div',
          { className: (0, _classnames2.default)([styles.sidebarIsOpen, styles.column]) },
          _react2.default.createElement(_PositionSummary2.default, {
            firstPosition: firstPosition,
            lastPosition: firstPosition + itemCollection.size - 1
          }),
          _react2.default.createElement(
            _Button2.default,
            {
              variant: 'icon',
              onClick: this.handleSidebarShowItems,
              icon: _IconArrowOpenDownLine2.default
            },
            _react2.default.createElement(
              _ScreenReaderContent2.default,
              null,
              (0, _formatMessage2.default)('Expand stimulus items')
            )
          )
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _props3 = this.props,
          isShowingItems = _props3.isShowingItems,
          sidebarOpen = _props3.sidebarOpen;

      var hideAllClass = (0, _classnames2.default)((0, _defineProperty3.default)({}, styles.hideAll, sidebarOpen && !isShowingItems && !this.shouldDisplayAllItems()));
      var hideItemsClass = (0, _classnames2.default)((0, _defineProperty3.default)({}, styles.hideAll, this.shouldDisplayAllItems() || isShowingItems));
      var hideSummaryClass = (0, _classnames2.default)((0, _defineProperty3.default)({}, styles.hideAll, !this.shouldDisplayAllItems() && !isShowingItems && !sidebarOpen));

      return _react2.default.createElement(
        'div',
        { className: hideAllClass },
        _react2.default.createElement(
          'div',
          { className: hideItemsClass },
          this.renderItemSummaryOnClosedSidear()
        ),
        _react2.default.createElement(
          'div',
          { className: hideSummaryClass },
          this.renderItems()
        )
      );
    }
  }]);
  Collection.displayName = 'Collection'
  ;
  return Collection;
}(_react.Component), _class2.propTypes = {
  // Passed in by Sidebar
  firstPosition: _propTypes2.default.number.isRequired,
  isOver: _propTypes2.default.bool.isRequired,
  /* This is used for when the stimulus is being dragged in build */
  renderSidebarItem: _propTypes2.default.func.isRequired,
  sidebarOpen: _propTypes2.default.bool.isRequired,
  itemCollection: _reactImmutableProptypes2.default.listOf(_reactImmutableProptypes2.default.record).isRequired,
  isShowingItems: _propTypes2.default.bool,
  stimulusId: _propTypes2.default.string.isRequired,
  // set in connect
  setSidebarStimulusIsShowing: _propTypes2.default.func.isRequired
}, _class2.defaultProps = {
  isShowingItems: false
}, _temp2)) || _class);
exports.default = Collection;