"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

var _immutable = require("immutable");

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

var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));

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

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

var _StimulusEdit = _interopRequireDefault(require("../StimulusEdit"));

var _StimulusShow = _interopRequireDefault(require("../StimulusShow"));

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

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

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

var _constants = require("@instructure/quiz-common/lib/constants");

var _QuizEntry = _interopRequireDefault(require("../../../../../building/components/resources/quizEntry/QuizEntry"));

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'cmmwg',
  template: function template(theme) {
    return "\n\n.quiz-core__Stimulus--stimulus {\n  display: flex;\n}\n\n.quiz-core__Stimulus--leftPanel {\n  box-sizing: border-box;\n  width: 50%;\n  max-height: 90vh;\n  overflow: auto;\n  border-right: ".concat(theme.leftPanelBorderWidth || 'inherit', " solid ").concat(theme.leftPanelBorderColor || 'inherit', ";\n}\n\n.quiz-core__Stimulus--rightPanel {\n  box-sizing: border-box;\n  width: 50%;\n  max-height: 90vh;\n  overflow: auto;\n  padding-left: ").concat(theme.rightPanelPadding || 'inherit', ";\n  margin-left: calc(").concat(theme.rightPanelPadding || 'inherit', " * -1);\n}\n\n.quiz-core__Stimulus--hidden {\n  display: none;\n}\n\n.quiz-core__Stimulus--stimulusWrapper {\n  transform: translate3d(0, 0, 0); \n}\n\n.quiz-core__Stimulus--dragAndDropHandle {\n  cursor: move;\n  height: 0;\n  z-index: ").concat(theme.dragAndDropHandleZIndex || 'inherit', ";\n  background-color: transparent;\n  border: none;\n  color: inherit;\n  font-size: ").concat(theme.dragAndDropHandleFontSize || 'inherit', ";\n  margin: ").concat(theme.dragAndDropHandleMargin || 'inherit', ";\n  margin-top: 0;\n  position: relative;\n}\n\n.quiz-core__Stimulus--quizEntryWrapper {\n  width: 100%;\n}\n");
  },
  'stimulus': 'quiz-core__Stimulus--stimulus',
  'leftPanel': 'quiz-core__Stimulus--leftPanel',
  'rightPanel': 'quiz-core__Stimulus--rightPanel',
  'hidden': 'quiz-core__Stimulus--hidden',
  'stimulusWrapper': 'quiz-core__Stimulus--stimulusWrapper',
  'dragAndDropHandle': 'quiz-core__Stimulus--dragAndDropHandle',
  'quizEntryWrapper': 'quiz-core__Stimulus--quizEntryWrapper'
};
var Stimulus = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Stimulus, _Component);

  function Stimulus() {
    var _getPrototypeOf2;

    var _this;

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

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

    _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();
    };

    return _this;
  }

  (0, _createClass2.default)(Stimulus, [{
    key: "shouldDisableDragHandle",
    value: function shouldDisableDragHandle() {
      var _this$props = this.props,
          quizEntries = _this$props.quizEntries,
          quizEntry = _this$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 _react.default.createElement("div", {
          className: styles.quizEntryWrapper,
          key: childEntry.id
        }, _react.default.createElement(_QuizEntry.default, _this2.props.propsForQuizEntry(childEntry, displayPosition)), !_this2.props.draggingOnBuild && _react.default.createElement(_Popover.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 ? _StimulusEdit.default : _StimulusShow.default;
      var connectDragPreview = this.props.connectDragPreview;
      return connectDragPreview(_react.default.createElement("div", {
        "data-automation": "sdk-stimulus-LeftPanelShow"
      }, _react.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, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.hidden, stimulus.isTemporary()), (0, _defineProperty2.default)(_classnames, styles.rightPanel, !stimulus.isTemporary()), _classnames));
      return _react.default.createElement("div", {
        className: styles.stimulus,
        ref: this.props.dndRef,
        "data-automation": "sdk-stimulus"
      }, _react.default.createElement("div", {
        className: styles.leftPanel
      }, this.renderLeftPanel()), _react.default.createElement("div", {
        className: rightPanelClass
      }, this.renderChildQuizEntries(), _react.default.createElement(_DragAndDropZone.default, Object.assign({}, propsForDnDZone, {
        location: "in"
      })), this.props.childEntries.size === 0 && _react.default.createElement(_Popover.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 _react.default.createElement("div", {
        tabIndex: "-1"
      }, _react.default.createElement(_DragAndDropZone.default, Object.assign({}, propsForDnDZone, {
        location: "above"
      })), this.renderPanels(propsForDnDZone), _react.default.createElement(_DragAndDropZone.default, Object.assign({}, propsForDnDZone, {
        location: "below"
      })));
    }
  }]);
  Stimulus.displayName = "Stimulus";
  return Stimulus;
}(_react.Component), _class2.propTypes = {
  bankEntryWarningWrapperProps: _propTypes.default.func,
  childEntries: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record).isRequired,
  connectDragPreview: _propTypes.default.func.isRequired,
  connectDragSource: _propTypes.default.func.isRequired,
  dndRef: _propTypes.default.func,
  draggingOnBuild: _propTypes.default.bool,
  draggingOver: _propTypes.default.bool.isRequired,
  draggingAboveHalf: _propTypes.default.bool.isRequired,
  dropIntoEmptyStimulus: _propTypes.default.bool,
  displayPosition: _propTypes.default.number.isRequired,
  isBankedContent: _propTypes.default.bool,
  isEditing: _propTypes.default.bool,
  guid: _propTypes.default.string.isRequired,
  openDeleteStimulusModal: _propTypes.default.func.isRequired,
  propsForQuizEntry: _propTypes.default.func.isRequired,
  quizEntry: _reactImmutableProptypes.default.record.isRequired,
  quizEntries: _reactImmutableProptypes.default.list.isRequired,
  quizId: _propTypes.default.string.isRequired,
  scrollKey: _propTypes.default.string,
  setUi: _propTypes.default.func.isRequired,
  shouldClone: _propTypes.default.bool.isRequired,
  stimulus: _reactImmutableProptypes.default.record.isRequired,
  switchOnEditing: _propTypes.default.func.isRequired,
  switchOffEditing: _propTypes.default.func.isRequired,
  onEditStimulusToggle: _propTypes.default.func.isRequired,
  editStimulusToggle: _propTypes.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: ''
}, _temp)) || _class);
exports.Stimulus = Stimulus;

var _default = (0, _reactDnd.DragSource)(_dragAndDropUtils.ItemTypes.QUIZ_ENTRY, _dragAndDropUtils.dragSource, _dragAndDropUtils.collectDrag)((0, _componentWithOutsideClick.default)(Stimulus));

exports.default = _default;