"use strict";

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

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

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

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 _immutable = require("immutable");

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

var _MenuItem = _interopRequireDefault(require("@instructure/ui-menu/lib/components/Menu/MenuItem"));

var _Menu = _interopRequireDefault(require("@instructure/ui-menu/lib/components/Menu"));

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

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

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

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

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

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

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

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

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

var _ref =
/*#__PURE__*/
_react.default.createElement(_IconArrowUp.default, null);

var _ref2 =
/*#__PURE__*/
_react.default.createElement(_IconMiniArrowUp.default, null);

var _ref3 =
/*#__PURE__*/
_react.default.createElement(_IconMiniArrowDown.default, null);

var _ref4 =
/*#__PURE__*/
_react.default.createElement(_IconArrowDown.default, null);

var DragHandle =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(DragHandle, _Component);

  function DragHandle() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this.moveUp = function () {
      _this.moveToPosition(_this.props.quizEntry.position - 1);

      var msg = "\xC9l\xE9ment transf\xE9r\xE9 d\u2019un espace vers le haut.";

      _this.props.screenreaderNotification(msg);
    };

    _this.moveDown = function () {
      _this.moveToPosition(_this.props.quizEntry.position + 1);

      var msg = "\xC9l\xE9ment transf\xE9r\xE9 d\u2019un espace vers le bas.";

      _this.props.screenreaderNotification(msg);
    };

    _this.moveToTop = function () {
      _this.moveQuizEntry(1, '');

      var msg = "\xC9l\xE9ment d\xE9plac\xE9 vers le haut de l\u2019\xE9valuation.";

      _this.props.screenreaderNotification(msg);
    };

    _this.moveToBottom = function () {
      _this.moveQuizEntry(_this.props.quizEntries.size, '');

      var msg = "\xC9l\xE9ment d\xE9plac\xE9 vers le bas de l\u2019\xE9valuation.";

      _this.props.screenreaderNotification(msg);
    };

    _this.handleTriggerRef = function (node) {
      _this.triggerRef = node;
    };

    return _this;
  }

  (0, _createClass2.default)(DragHandle, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.conditionalFocus();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.conditionalFocus();
    }
  }, {
    key: "conditionalFocus",
    value: function conditionalFocus() {
      var matchingQuizEntryId = this.props.movedQuizEntry === this.props.quizEntry.id;
      var matchingLocation = this.props.onSidebar === this.props.movedInSidebar;

      if (matchingQuizEntryId && matchingLocation) {
        this.triggerRef && this.triggerRef.focus();
        this.props.clearUI(_constants.MOVED_QUIZ_ENTRY);
        this.props.clearUI(_constants.MOVED_IN_SIDEBAR);
      }
    }
  }, {
    key: "isFirstItem",
    value: function isFirstItem() {
      return this.props.quizEntry.position === 1;
    }
  }, {
    key: "isLastItem",
    value: function isLastItem() {
      var _this$props = this.props,
          quizEntry = _this$props.quizEntry,
          quizEntries = _this$props.quizEntries;
      var numItems = quizEntry.hasStimulus ? quizEntry.getNestedEntries().size : 0;
      var position = quizEntry.position + numItems;
      return position === quizEntries.size;
    }
  }, {
    key: "handleMove",
    value: function handleMove(position, stimulusQuizEntryId) {
      var _this$props2 = this.props,
          quizEntry = _this$props2.quizEntry,
          quizId = _this$props2.quizId;
      var stimulusQuizEntryIdChanged = stimulusQuizEntryId !== quizEntry.stimulusQuizEntryId;
      var isImmutable = quizEntry.isItem ? quizEntry.getEntry().isImmutable() : false;

      if (isImmutable && stimulusQuizEntryIdChanged) {
        var uiData = (0, _immutable.Map)({
          movedInSidebar: this.props.onSidebar,
          quizId: quizId,
          position: position,
          stimulusQuizEntryId: stimulusQuizEntryId,
          quizEntryId: quizEntry.id
        });
        this.props.setUI(_constants.MOVE_IMMUTABLE_DATA, uiData);
        this.props.openMoveImmutableModal();
      } else {
        this.props.setUI(_constants.MOVED_IN_SIDEBAR, this.props.onSidebar);
        this.props.moveQuizEntry(quizId, position, stimulusQuizEntryId, quizEntry.id);
      }
    }
  }, {
    key: "moveQuizEntry",
    value: function moveQuizEntry(position, stimulusQuizEntryId) {
      this.props.quizEntry.isTemporary ? this.props.moveTemporaryQuizEntry(position, stimulusQuizEntryId) : this.handleMove(position, stimulusQuizEntryId);
    }
  }, {
    key: "moveToPosition",
    value: function moveToPosition(position) {
      var quizEntry = this.props.quizEntry;
      var movingDown = position > quizEntry.position;
      var newPosition = position;

      if (movingDown && quizEntry.hasStimulus) {
        newPosition = position + quizEntry.getNestedEntries().size;
      }

      var targetQuizEntry = this.props.quizEntries.find(function (qe) {
        return qe.position === newPosition;
      });

      if (targetQuizEntry === void 0) {
        var newPos = movingDown ? this.props.quizEntries.size : 1;
        this.moveQuizEntry(newPos, '');
        return;
      }

      var inStimulus = quizEntry.isInStimulus;
      var targetInStimulus = targetQuizEntry.isInStimulus;
      var losingStimulusQuizEntryId = inStimulus && !targetInStimulus;
      var receivingStimulusQuizEntryId = !inStimulus && targetInStimulus;
      var newStimulusQuizEntryId = quizEntry.stimulusQuizEntryId; // Handling moving of stimulus groups:

      if (quizEntry.hasStimulus) {
        if (movingDown && targetQuizEntry.hasStimulus) {
          newPosition += targetQuizEntry.getNestedEntries().size;
        } else if (!movingDown && targetInStimulus) {
          var targetStimulusQuizEntry = this.props.quizEntries.find(function (qe) {
            return qe.id === targetQuizEntry.stimulusQuizEntryId;
          });
          newPosition = position - targetStimulusQuizEntry.getNestedEntries().size;
        } // This block is for handling moving of items in/out/around stimuli.
        // For example, when moving down, out of a stimulus group, you don't actually
        // want the position of the quizEntry to change, you just want to change the
        // stimulusQuizEntryId, so that it's no longer associated with the stimulus.
        // There are 4 such cases:

      } else if (targetQuizEntry.hasStimulus && !inStimulus) {
        newPosition = movingDown ? position : position + 1;
        newStimulusQuizEntryId = targetQuizEntry.id;
      } else if (targetQuizEntry.hasStimulus && inStimulus) {
        newPosition = movingDown ? position - 1 : position;
        newStimulusQuizEntryId = '';
      } else if (receivingStimulusQuizEntryId && !movingDown) {
        newPosition = position + 1;
        newStimulusQuizEntryId = targetQuizEntry.stimulusQuizEntryId;
      } else if (losingStimulusQuizEntryId && movingDown) {
        newPosition = position - 1;
        newStimulusQuizEntryId = '';
      }

      this.moveQuizEntry(newPosition, newStimulusQuizEntryId);
    }
  }, {
    key: "renderIcon",
    value: function renderIcon() {
      var displayPosition = this.props.quizEntry.positionToDisplay(this.props.displayPosition);
      return _react.default.createElement(_Button.default // must be a button when disabled for the screenreader to read it properly
      // must be a div when enabled to allow dragging in firefox
      , {
        as: this.props.disabled ? 'button' : 'div',
        variant: "icon",
        icon: _IconDragHandle.default,
        size: "small",
        ref: this.handleTriggerRef,
        onKeyDown: _keyboardClickable.default,
        disabled: this.props.disabled,
        "data-automation": "sdk-drag-handle",
        cursor: "move"
      }, _react.default.createElement(_ScreenReaderContent.default, null, this.props.quizEntry.generateScreenReaderText(displayPosition, _constants.MOVE)));
    }
  }, {
    key: "renderMenuItems",
    value: function renderMenuItems() {
      var menuItems = [];

      if (!this.isFirstItem()) {
        menuItems.push(_react.default.createElement(_MenuItem.default, {
          key: "toTop",
          onSelect: this.moveToTop
        }, _ref, "D\xE9placer vers le haut"));
        menuItems.push(_react.default.createElement(_MenuItem.default, {
          key: "moveUp",
          onSelect: this.moveUp
        }, _ref2, "D\xE9placer vers le haut"));
      }

      if (!this.isLastItem() || this.props.quizEntry.isInStimulus) {
        menuItems.push(_react.default.createElement(_MenuItem.default, {
          key: "moveDown",
          onSelect: this.moveDown
        }, _ref3, "D\xE9placer vers le bas"));
        menuItems.push(_react.default.createElement(_MenuItem.default, {
          key: "toBottom",
          onSelect: this.moveToBottom
        }, _ref4, "D\xE9placer vers le bas"));
      }

      return menuItems;
    }
  }, {
    key: "render",
    value: function render() {
      var menuItems = this.renderMenuItems();

      if (!this.props.disabled && menuItems.length > 0) {
        return _react.default.createElement(_Menu.default, {
          trigger: this.renderIcon(),
          onToggle: this.setFocused,
          mountNode: this.props.onSidebar ? this.sidebarNav : void 0,
          placement: this.props.onSidebar ? 'start' : void 0
        }, menuItems);
      }

      return this.renderIcon();
    }
  }, {
    key: "sidebarNav",
    get: function get() {
      return document.getElementById(_constants.SIDEBAR_NAV_ID);
    }
  }]);
  DragHandle.displayName = "DragHandle";
  return DragHandle;
}(_react.Component);

exports.default = DragHandle;
DragHandle.propTypes = {
  clearUI: _propTypes.default.func.isRequired,
  disabled: _propTypes.default.bool,
  displayPosition: _propTypes.default.number.isRequired,
  moveTemporaryQuizEntry: _propTypes.default.func.isRequired,
  moveQuizEntry: _propTypes.default.func.isRequired,
  movedInSidebar: _propTypes.default.bool,
  movedQuizEntry: _propTypes.default.string,
  onSidebar: _propTypes.default.bool,
  openMoveImmutableModal: _propTypes.default.func.isRequired,
  quizEntry: _reactImmutableProptypes.default.record.isRequired,
  quizEntries: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record).isRequired,
  quizId: _propTypes.default.string.isRequired,
  screenreaderNotification: _propTypes.default.func.isRequired,
  setUI: _propTypes.default.func.isRequired
};
DragHandle.defaultProps = {
  disabled: false,
  movedQuizEntry: '',
  movedInSidebar: null,
  onSidebar: false
};