'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.DISPLAY_AS_SUMMARY_LIMIT = undefined;

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 _IconTextLeftLine = require('instructure-icons/lib/Line/IconTextLeftLine');

var _IconTextLeftLine2 = _interopRequireDefault(_IconTextLeftLine);

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

var _lib2 = _interopRequireDefault(_lib);

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

var _Button2 = _interopRequireDefault(_Button);

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

var _Flex2 = _interopRequireDefault(_Flex);

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

var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);

var _keyboardClickable = require('../../../../../common/util/keyboardClickable');

var _keyboardClickable2 = _interopRequireDefault(_keyboardClickable);

var _Collection = require('./Collection');

var _Collection2 = _interopRequireDefault(_Collection);

var _Title = require('./Title');

var _Title2 = _interopRequireDefault(_Title);

var _Summary = require('./Summary');

var _Summary2 = _interopRequireDefault(_Summary);

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

var _theme2 = _interopRequireDefault(_theme);

var _formatMessage = require('../../../../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._2rp5Z1gDLs0y_aCGQYLmHi {\n  border-bottom: ' + theme.sidebarItemBorderWidth + ' solid ' + theme.sidebarItemBorderColor + ';\n}\n\n._3Wa11PurxiOwuSJbo1vjf7 {\n  border-right: ' + theme.hoverBorderWidth + ' solid ' + theme.borderColor + ';\n  padding: ' + theme.sidebarClosedButtonPadding + ';\n  text-align: center;\n}\n\n[dir="ltr"] ._3Wa11PurxiOwuSJbo1vjf7 {\n  text-align: center;\n}\n\n[dir="rtl"] ._3Wa11PurxiOwuSJbo1vjf7 {\n  text-align: center;\n}\n\n._3Wa11PurxiOwuSJbo1vjf7:hover {\n  border-right: ' + theme.hoverBorderWidth + ' solid ' + theme.hoverBorderColor + ';\n}\n\n.mrjUk8ruEVg_mbcWBPFxA {\n  padding: ' + theme.sidebarHeaderPadding + ' 0;\n  border-right: ' + theme.hoverBorderWidth + ' solid ' + theme.borderColor + ';\n}\n\n.mrjUk8ruEVg_mbcWBPFxA:hover {\n  border-right: ' + theme.hoverBorderWidth + ' solid ' + theme.hoverBorderColor + ';\n}\n\n._2xNKIgibu0IKMwBuUoTI8z {\n  margin-left: 5%;\n}\n\n._2hOmnTV5ulgfIEpBPkeEsx {\n  font-size: ' + theme.sidebarIsOpenInfoHeaderFontSize + ';\n  color: ' + theme.sidebarIsOpenInfoHeaderColor + ';\n  margin-bottom: ' + theme.sidebarIsOpenInfoHeaderMargin + ';\n  padding-left: ' + theme.sidebarIsOpenInfoHeaderPadding + ';\n}\n';
  },
  'sidebarItem': '_2rp5Z1gDLs0y_aCGQYLmHi',
  'sidebarItemClosedButton': '_3Wa11PurxiOwuSJbo1vjf7',
  'stimulusHeader': 'mrjUk8ruEVg_mbcWBPFxA',
  'stimulusBody': '_2xNKIgibu0IKMwBuUoTI8z',
  'infoHeader': '_2hOmnTV5ulgfIEpBPkeEsx'
};
var DISPLAY_AS_SUMMARY_LIMIT = exports.DISPLAY_AS_SUMMARY_LIMIT = 5;

var SidebarStimulus = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(SidebarStimulus, _Component);

  function SidebarStimulus() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = SidebarStimulus.__proto__ || Object.getPrototypeOf(SidebarStimulus)).call.apply(_ref, [this].concat(args))), _this), _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.stimulusParent.id);
      e.stopPropagation();
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(SidebarStimulus, [{
    key: 'renderCollection',
    value: function renderCollection() {
      if (this.props.isDragging) {
        return;
      }
      var _props = this.props,
          displayPosition = _props.displayPosition,
          isOver = _props.isOver,
          isShowingItems = _props.isShowingItems,
          renderSidebarItem = _props.renderSidebarItem,
          sidebarOpen = _props.sidebarOpen;


      return _react2.default.createElement(_Collection2.default, {
        firstPosition: displayPosition,
        isOver: isOver,
        isShowingItems: isShowingItems,
        itemCollection: this.props.childEntries,
        renderSidebarItem: renderSidebarItem,
        sidebarOpen: sidebarOpen,
        stimulusId: this.props.stimulus.id
      });
    }
  }, {
    key: 'renderButton',
    value: function renderButton() {
      var displayPosition = this.props.displayPosition;

      return _react2.default.createElement(
        _Button2.default,
        {
          icon: _IconTextLeftLine2.default,
          onClick: this.scrollToItem,
          onKeyDown: _keyboardClickable2.default,
          variant: 'icon'
        },
        _react2.default.createElement(
          _ScreenReaderContent2.default,
          null,
          (0, _formatMessage2.default)('Scroll to stimulus at posision { displayPosition }', { displayPosition: displayPosition })
        )
      );
    }
  }, {
    key: 'renderClosed',
    value: function renderClosed() {
      return _react2.default.createElement(
        'div',
        { className: styles.sidebarItem },
        _react2.default.createElement(
          'div',
          { className: styles.sidebarItemClosedButton },
          this.renderButton()
        ),
        this.renderCollection()
      );
    }
  }, {
    key: 'renderOpen',
    value: function renderOpen() {
      var _props2 = this.props,
          children = _props2.children,
          displayPosition = _props2.displayPosition,
          isDragging = _props2.isDragging,
          isShowingItems = _props2.isShowingItems,
          sidebarOpen = _props2.sidebarOpen,
          stimulus = _props2.stimulus;


      return _react2.default.createElement(
        'div',
        { className: styles.sidebarItem },
        _react2.default.createElement(
          'div',
          { className: styles.stimulusHeader },
          _react2.default.createElement(
            'div',
            { className: styles.infoHeader },
            (0, _formatMessage2.default)('Stimulus')
          ),
          _react2.default.createElement(
            'div',
            { className: styles.stimulusBody },
            _react2.default.createElement(
              _Flex2.default,
              { justifyItems: 'space-between' },
              _react2.default.createElement(
                _Flex.FlexItem,
                null,
                this.renderButton()
              ),
              _react2.default.createElement(
                _Flex.FlexItem,
                {
                  grow: true, shrink: true,
                  onClick: this.scrollToItem,
                  tabIndex: '-1'
                },
                _react2.default.createElement(_Title2.default, { title: stimulus.title })
              ),
              _react2.default.createElement(
                _Flex.FlexItem,
                null,
                children
              )
            ),
            _react2.default.createElement(_Summary2.default, {
              startPosition: displayPosition,
              isDragging: isDragging,
              isShowingItems: isShowingItems,
              sidebarOpen: sidebarOpen,
              stimulusId: stimulus.id,
              numberOfItems: this.props.childEntries.size
            })
          )
        ),
        this.renderCollection()
      );
    }
  }, {
    key: 'render',
    value: function render() {
      return this.props.sidebarOpen ? this.renderOpen() : this.renderClosed();
    }
  }]);
  SidebarStimulus.displayName = 'SidebarStimulus'
  ;
  return SidebarStimulus;
}(_react.Component), _class2.propTypes = {
  childEntries: _reactImmutableProptypes2.default.listOf(_reactImmutableProptypes2.default.record).isRequired,
  // Passed in by Sidebar
  children: _propTypes2.default.element,
  displayPosition: _propTypes2.default.number.isRequired,
  /* This is used for when the stimulus is being dragged in build */
  isDragging: _propTypes2.default.bool,
  isOver: _propTypes2.default.bool,
  isShowingItems: _propTypes2.default.bool,
  renderSidebarItem: _propTypes2.default.func.isRequired,
  scrollToItem: _propTypes2.default.func.isRequired,
  sidebarOpen: _propTypes2.default.bool.isRequired,
  stimulus: _reactImmutableProptypes2.default.record.isRequired,
  stimulusParent: _reactImmutableProptypes2.default.record.isRequired
}, _class2.defaultProps = {
  children: null,
  isDragging: false,
  isOver: false,
  isShowingItems: false
}, _temp2)) || _class);
exports.default = SidebarStimulus;