'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Stimulus = 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 _reactDnd = require('react-dnd');

var _immutable = require('immutable');

var _classnames2 = require('classnames');

var _classnames3 = _interopRequireDefault(_classnames2);

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

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

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

var _lib2 = _interopRequireDefault(_lib);

var _Popover = require('../../quiz/AddContent/Popover');

var _Popover2 = _interopRequireDefault(_Popover);

var _StimulusEdit = require('../StimulusEdit');

var _StimulusEdit2 = _interopRequireDefault(_StimulusEdit);

var _StimulusShow = require('../StimulusShow');

var _StimulusShow2 = _interopRequireDefault(_StimulusShow);

var _DragAndDropZone = require('../../../shared/drag_and_drop/DragAndDropZone');

var _DragAndDropZone2 = _interopRequireDefault(_DragAndDropZone);

var _dragAndDropUtils = require('../../../../../common/components/shared/drag_and_drop/dragAndDropUtils');

var _componentWithOutsideClick = require('../../../shared/functionality/componentWithOutsideClick');

var _componentWithOutsideClick2 = _interopRequireDefault(_componentWithOutsideClick);

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

var _index = require('../../../../../building/components/resources/quizEntry/QuizEntry/index');

var _index2 = _interopRequireDefault(_index);

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.Stimulus__styles__stimulus {\n  display: flex;\n}\n\n.Stimulus__styles__leftPanel {\n  width: 50%;\n  max-height: 90vh;\n  overflow: auto;\n  padding: ' + theme.leftPanelPadding + ';\n  border-right: ' + theme.leftPanelBorderWidth + ' solid ' + theme.leftPanelBorderColor + ';\n}\n\n.Stimulus__styles__rightPanel {\n  width: 50%;\n  max-height: 90vh;\n  overflow: auto;\n  padding-left: ' + theme.rightPanelPadding + ';\n}\n\n.Stimulus__styles__hidden {\n  display: none;\n}\n\n.Stimulus__styles__stimulusWrapper {\n  transform: translate3d(0, 0, 0); /* for drag and drop preview to work */\n}\n\n.Stimulus__styles__dragAndDropHandle {\n  cursor: move;\n  height: 0;\n  z-index: ' + theme.dragAndDropHandleZIndex + ';\n  background-color: transparent;\n  border: none;\n  color: inherit;\n  font-size: ' + theme.dragAndDropHandleFontSize + ';\n  margin: ' + theme.dragAndDropHandleMargin + ';\n  margin-top: 0;\n  position: relative;\n}\n\n.Stimulus__styles__quizEntryWrapper {\n  width: 100%;\n}\n';
  },
  'stimulus': 'Stimulus__styles__stimulus',
  'leftPanel': 'Stimulus__styles__leftPanel',
  'rightPanel': 'Stimulus__styles__rightPanel',
  'hidden': 'Stimulus__styles__hidden',
  'stimulusWrapper': 'Stimulus__styles__stimulusWrapper',
  'dragAndDropHandle': 'Stimulus__styles__dragAndDropHandle',
  'quizEntryWrapper': 'Stimulus__styles__quizEntryWrapper'
};
var Stimulus = exports.Stimulus = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp2 = _class2 = function (_Component) {
  (0, _inherits3.default)(Stimulus, _Component);

  function Stimulus() {
    var _ref;

    var _temp, _this, _ret;

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

    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 = Stimulus.__proto__ || Object.getPrototypeOf(Stimulus)).call.apply(_ref, [this].concat(args))), _this), _this.openDeleteStimulusModal = function () {
      var uiData = (0, _immutable.Map)({
        quizId: _this.props.quizId,
        stimulusEntry: _this.props.quizEntry,
        childEntries: _this.props.childEntries
      });

      _this.props.setUi(_constants.DELETE_STIMULUS_DATA, uiData);
      _this.props.openDeleteStimulusModal();
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(Stimulus, [{
    key: 'shouldDisableDragHandle',
    value: function shouldDisableDragHandle() {
      var _props = this.props,
          quizEntries = _props.quizEntries,
          quizEntry = _props.quizEntry;

      return quizEntries.size === quizEntry.positionSlots + 1;
    }
  }, {
    key: 'renderChildQuizEntries',
    value: function renderChildQuizEntries() {
      var _this2 = this;

      var nextDisplayPosition = this.props.displayPosition;
      return this.props.childEntries.toArray().map(function (childEntry, idx) {
        var displayPosition = nextDisplayPosition;
        nextDisplayPosition += childEntry.displayPositionSlots;
        return _react2.default.createElement(
          'div',
          { className: styles.quizEntryWrapper, key: childEntry.id },
          _react2.default.createElement(_index2.default, _this2.props.propsForQuizEntry(childEntry, displayPosition)),
          !_this2.props.draggingOnBuild && _react2.default.createElement(_Popover2.default, {
            allowStimulusCreation: false,
            stimulusId: _this2.props.stimulus.id,
            parentEntryId: _this2.props.quizEntry.id,
            quizId: _this2.props.quizId,
            position: childEntry.position + 1,
            useStimulusTrigger: idx + 1 === _this2.props.childEntries.size
          })
        );
      });
    }
  }, {
    key: 'renderLeftPanel',
    value: function renderLeftPanel() {
      var StimulusComponent = this.props.isEditing ? _StimulusEdit2.default : _StimulusShow2.default;

      var connectDragPreview = this.props.connectDragPreview;

      return connectDragPreview(_react2.default.createElement(
        'div',
        { 'data-automation': 'sdk-stimulus-LeftPanelShow' },
        _react2.default.createElement(StimulusComponent, {
          bankEntryWarningWrapperProps: this.props.bankEntryWarningWrapperProps,
          connectDragSource: this.props.connectDragSource,
          displayPosition: this.props.displayPosition,
          guid: this.props.guid,
          isBankedContent: this.props.isBankedContent,
          openDeleteStimulusModal: this.openDeleteStimulusModal,
          quizEntries: this.props.quizEntries,
          quizEntry: this.props.quizEntry,
          quizId: this.props.quizId,
          scrollKey: this.props.scrollKey,
          shouldClone: this.props.shouldClone,
          shouldDisableDragHandle: this.shouldDisableDragHandle(),
          stimulus: this.props.stimulus,
          switchOnEditing: this.props.switchOnEditing,
          switchOffEditing: this.props.switchOffEditing,
          onEditToggle: this.props.onEditStimulusToggle,
          shouldFocusOnMount: this.props.editStimulusToggle
        })
      ));
    }
  }, {
    key: 'renderPanels',
    value: function renderPanels(propsForDnDZone) {
      var _classnames;

      var stimulus = this.props.stimulus;


      var rightPanelClass = (0, _classnames3.default)((_classnames = {}, (0, _defineProperty3.default)(_classnames, styles.hidden, stimulus.isTemporary()), (0, _defineProperty3.default)(_classnames, styles.rightPanel, !stimulus.isTemporary()), _classnames));
      return _react2.default.createElement(
        'div',
        { className: styles.stimulus, ref: this.props.dndRef },
        _react2.default.createElement(
          'div',
          { className: styles.leftPanel },
          this.renderLeftPanel()
        ),
        _react2.default.createElement(
          'div',
          { className: rightPanelClass },
          this.renderChildQuizEntries(),
          _react2.default.createElement(_DragAndDropZone2.default, Object.assign({}, propsForDnDZone, { location: 'in' })),
          this.props.childEntries.size === 0 && _react2.default.createElement(_Popover2.default, {
            allowStimulusCreation: false,
            stimulusId: this.props.stimulus.id,
            parentEntryId: this.props.quizEntry.id,
            quizId: this.props.quizId,
            position: this.props.quizEntry.position + 1,
            useStimulusTrigger: true
          })
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var propsForDnDZone = {
        inStimulus: true,
        draggingOver: this.props.draggingOver,
        draggingAboveHalf: this.props.draggingAboveHalf,
        dropIntoEmptyStimulus: this.props.dropIntoEmptyStimulus
      };

      return _react2.default.createElement(
        'div',
        { tabIndex: '-1' },
        _react2.default.createElement(_DragAndDropZone2.default, Object.assign({}, propsForDnDZone, { location: 'above' })),
        this.renderPanels(propsForDnDZone),
        _react2.default.createElement(_DragAndDropZone2.default, Object.assign({}, propsForDnDZone, { location: 'below' }))
      );
    }
  }]);
  Stimulus.displayName = 'Stimulus'
  ;
  return Stimulus;
}(_react.Component), _class2.propTypes = {
  bankEntryWarningWrapperProps: _propTypes2.default.func,
  childEntries: _reactImmutableProptypes2.default.listOf(_reactImmutableProptypes2.default.record).isRequired,
  connectDragPreview: _propTypes2.default.func.isRequired,
  connectDragSource: _propTypes2.default.func.isRequired,
  dndRef: _propTypes2.default.func,
  draggingOnBuild: _propTypes2.default.bool,
  draggingOver: _propTypes2.default.bool.isRequired,
  draggingAboveHalf: _propTypes2.default.bool.isRequired,
  dropIntoEmptyStimulus: _propTypes2.default.bool,
  displayPosition: _propTypes2.default.number.isRequired,
  isBankedContent: _propTypes2.default.bool,
  isEditing: _propTypes2.default.bool,
  guid: _propTypes2.default.string.isRequired,
  openDeleteStimulusModal: _propTypes2.default.func.isRequired,
  propsForQuizEntry: _propTypes2.default.func.isRequired,
  quizEntry: _reactImmutableProptypes2.default.record.isRequired,
  quizEntries: _reactImmutableProptypes2.default.list.isRequired,
  quizId: _propTypes2.default.string.isRequired,
  scrollKey: _propTypes2.default.string,
  setUi: _propTypes2.default.func.isRequired,
  shouldClone: _propTypes2.default.bool.isRequired,
  stimulus: _reactImmutableProptypes2.default.record.isRequired,
  switchOnEditing: _propTypes2.default.func.isRequired,
  switchOffEditing: _propTypes2.default.func.isRequired,
  onEditStimulusToggle: _propTypes2.default.func.isRequired,
  editStimulusToggle: _propTypes2.default.bool.isRequired
}, _class2.defaultProps = {
  bankEntryWarningWrapperProps: function bankEntryWarningWrapperProps() {},
  childEntries: (0, _immutable.List)([]),
  dndRef: function dndRef() {},
  draggingOnBuild: false,
  draggingOver: false,
  draggingAboveHalf: false,
  dropIntoEmptyStimulus: false,
  isBankedContent: false,
  isEditing: false,
  onEditStimulusToggle: function onEditStimulusToggle() {},
  scrollKey: ''
}, _temp2)) || _class);
exports.default = (0, _reactDnd.DragSource)(_dragAndDropUtils.ItemTypes.QUIZ_ENTRY, _dragAndDropUtils.dragSource, _dragAndDropUtils.collectDrag)((0, _componentWithOutsideClick2.default)(Stimulus));