"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.QuizEntryShowRaw = 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 _partial = _interopRequireDefault(require("lodash/partial"));

var _reactDnd = require("react-dnd");

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

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

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

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

var _Item = _interopRequireDefault(require("../../../../../common/records/Item"));

var _Overlay = _interopRequireDefault(require("../../../../../common/components/shared/overlay/Overlay"));

var _ActionButtons = _interopRequireDefault(require("../../ActionButtons"));

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

var _PositionBox = _interopRequireDefault(require("../../../../../common/components/resources/positionBox/PositionBox"));

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

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

var _dec,
    _class,
    _class2,
    _temp,
    _default_ja_number = Intl.NumberFormat("ja", { style: "decimal" }).format;

var styles = {
  componentId: 'bxAMG',
  template: function template(theme) {
    return "\n\n.quiz-core__QuizEntryShow--quizEntryWrapper {\n  transform: translate3d(0, 0, 0); \n}\n\n.quiz-core__QuizEntryShow--quizEntryShow {\n  padding: ".concat(theme.quizEntryShowPadding || 'inherit', ";\n  background-color: ").concat(theme.quizEntryShowBackgroundColor || 'inherit', ";\n}\n\n.quiz-core__QuizEntryShow--header {\n  height: ").concat(theme.headerHeight || 'inherit', ";\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  align-items: stretch;\n  padding-right: ").concat(theme.headerRightPadding || 'inherit', ";\n}\n\n.quiz-core__QuizEntryShow--dndBorder {\n  border: ").concat(theme.dndBorder || 'inherit', ";\n}\n\n.quiz-core__QuizEntryShow--leftHeader {\n  flex: 8 0 0;\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n}\n\n.quiz-core__QuizEntryShow--rightHeader {\n  flex: 0 0 auto;\n  display: inline-flex;\n  text-align: right;\n  z-index: ").concat(theme.rightHeaderZIndex || 'inherit', ";\n  color: ").concat(theme.rightHeaderColor || 'inherit', ";\n}\n\n[dir=\"ltr\"] .quiz-core__QuizEntryShow--rightHeader {\n  text-align: right;\n}\n\n[dir=\"rtl\"] .quiz-core__QuizEntryShow--rightHeader {\n  text-align: right;\n}\n\n.quiz-core__QuizEntryShow--rightHeader button {\n  background-color: transparent;\n  background-color: initial;\n}\n\n.quiz-core__QuizEntryShow--title,\n.quiz-core__QuizEntryShow--interactionTypeName,\n.quiz-core__QuizEntryShow--points {\n  color: ").concat(theme.titleInteractionTypeNamePointsColor || 'inherit', ";\n  font-size: ").concat(theme.titleInteractionTypeNamePointsFontSize || 'inherit', ";\n  margin-left: ").concat(theme.titleInteractionTypeNamePointsLeftMargin || 'inherit', ";\n  margin-right: ").concat(theme.titleInteractionTypeNamePointsRightMargin || 'inherit', ";\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.quiz-core__QuizEntryShow--itemHolder {\n  margin: ").concat(theme.itemHolderMargin || 'inherit', ";\n}\n\n.quiz-core__QuizEntryShow--optionsButton,\n.quiz-core__QuizEntryShow--dragAndDropHandle {\n  background-color: transparent;\n  border: none;\n  color: inherit;\n  font-size: ").concat(theme.optionsButtonDragDropHandleFontSize || 'inherit', ";\n  margin: ").concat(theme.optionsButtonDragDropHandleMargin || 'inherit', ";\n}\n\n.quiz-core__QuizEntryShow--optionsButton {\n  cursor: pointer;\n}\n");
  },
  'quizEntryWrapper': 'quiz-core__QuizEntryShow--quizEntryWrapper',
  'quizEntryShow': 'quiz-core__QuizEntryShow--quizEntryShow',
  'header': 'quiz-core__QuizEntryShow--header',
  'dndBorder': 'quiz-core__QuizEntryShow--dndBorder',
  'leftHeader': 'quiz-core__QuizEntryShow--leftHeader',
  'rightHeader': 'quiz-core__QuizEntryShow--rightHeader',
  'title': 'quiz-core__QuizEntryShow--title',
  'interactionTypeName': 'quiz-core__QuizEntryShow--interactionTypeName',
  'points': 'quiz-core__QuizEntryShow--points',
  'itemHolder': 'quiz-core__QuizEntryShow--itemHolder',
  'optionsButton': 'quiz-core__QuizEntryShow--optionsButton',
  'dragAndDropHandle': 'quiz-core__QuizEntryShow--dragAndDropHandle'
};
var QuizEntryShow = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(QuizEntryShow, _Component);

  function QuizEntryShow() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this.editingOn = function () {
      if (!_this.props.quizEntryWithErrorsShowing) {
        var msg = "\u30A2\u30A4\u30C6\u30E0\u304C\u7DE8\u96C6\u30E2\u30FC\u30C9\u306B\u5207\u308A\u66FF\u3048\u3089\u308C\u307E\u3057\u305F\u3002";

        _this.props.screenreaderNotification(msg);

        _this.props.switchOnEditing();
      }
    };

    _this.removeItem = function (e) {
      _this.props.withConfirm((0, _partial.default)(_this.props.removeQuizEntry, _this.props.quizId, _this.props.quizEntry), _this.removalDialogData());
    };

    return _this;
  }

  (0, _createClass2.default)(QuizEntryShow, [{
    key: "getPointsText",
    value: function getPointsText(points) {
      var _s, _n;

      return _default_ja_number(points) + " \u30DD\u30A4\u30F3\u30C8";
    }
  }, {
    key: "removalDialogData",
    value: function removalDialogData() {
      return {
        title: "\u30A2\u30A4\u30C6\u30E0\u3092\u524A\u9664\u3057\u307E\u3059\u304B\uFF1F",
        text: "\u3053\u306E\u30A2\u30A4\u30C6\u30E0\u3092\u524A\u9664\u3057\u3066\u3082\u3088\u308D\u3057\u3044\u3067\u3059\u304B\uFF1F",
        continueText: "\u30A2\u30A4\u30C6\u30E0\u3092\u524A\u9664",
        cancelText: "\u30A2\u30A4\u30C6\u30E0\u3092\u4FDD\u6301\u3059\u308B"
      };
    }
  }, {
    key: "shouldDisableDragHandle",
    value: function shouldDisableDragHandle() {
      return this.props.quizEntries.size === 1;
    }
  }, {
    key: "renderPointsPossible",
    value: function renderPointsPossible() {
      if (this.props.entry instanceof _Item.default) {
        var pointsPossible = this.props.quizEntry.pointsPossible;
        return _react.default.createElement("div", {
          className: styles.points,
          "data-automation": "sdk-points-possible-div"
        }, this.getPointsText(pointsPossible || 0));
      }
    }
  }, {
    key: "renderInteractionType",
    value: function renderInteractionType() {
      if (this.props.entry instanceof _Item.default) {
        var interactionTypeName = this.props.entry.getInteractionType().name;
        return _react.default.createElement("div", {
          className: styles.interactionTypeName,
          "data-automation": "sdk-interaction-type-name-div"
        }, interactionTypeName);
      }
    }
  }, {
    key: "renderBankedContent",
    value: function renderBankedContent() {
      if (this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry) {
        return _react.default.createElement(_IconBank.default, null);
      }
    }
  }, {
    key: "renderLeftHeader",
    value: function renderLeftHeader() {
      return _react.default.createElement("div", {
        className: styles.leftHeader
      }, this.renderBankedContent(), this.renderInteractionType(), this.renderPointsPossible(), _react.default.createElement("div", {
        className: styles.title,
        "data-automation": "sdk-quiz-entry-title-div"
      }, this.props.entry.title));
    }
  }, {
    key: "setInert",
    value: function setInert(node) {
      node && node.setAttribute('inert', '');
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          connectDragPreview = _this$props.connectDragPreview,
          displayPosition = _this$props.displayPosition,
          draggingOver = _this$props.draggingOver,
          draggingAboveHalf = _this$props.draggingAboveHalf;
      var positionToDisplay = this.props.quizEntry.positionToDisplay(displayPosition);
      var positionText = "\u30DD\u30B8\u30B7\u30E7\u30F3" + positionToDisplay + "\u306B\u3042\u308B\u30A2\u30A4\u30C6\u30E0\u306E\u30D7\u30EC\u30D3\u30E5\u30FC";
      var srMsg = "\u6B21\u306E\u30A2\u30A4\u30C6\u30E0\u306F\u8B1B\u5E2B\u306E\u30D7\u30EC\u30D3\u30E5\u30FC\u3067\u3059\u3002\u3053\u306E\u30A2\u30A4\u30C6\u30E0\u3092\u7DE8\u96C6\u3059\u308B\u306B\u306F\u3001[\u30A2\u30A4\u30C6\u30E0\u306E\u7DE8\u96C6]\u30DC\u30BF\u30F3\u306B\u623B\u3063\u3066\u30AF\u30EA\u30C3\u30AF\u3057\u307E\u3059\u3002";
      var propsForDnDZone = {
        draggingOver: draggingOver,
        draggingAboveHalf: draggingAboveHalf // Overlay gets tabIndex === "-1" so that the drag handle is tabbable before
        // the Overlay get focus and opens the quizEntry in edit mode

      };
      return _react.default.createElement(_Overlay.default, {
        onClick: this.editingOn,
        wrapperClassName: styles.quizEntryWrapper,
        tabIndex: "-1"
      }, _react.default.createElement(_DragAndDropZone.default, Object.assign({}, propsForDnDZone, {
        location: "above"
      })), connectDragPreview(_react.default.createElement("div", {
        className: styles.quizEntryShow,
        "data-automation": "sdk-quiz-entry-show",
        "data-automation-item-id": this.props.quizEntry.id
      }, _react.default.createElement("div", {
        className: styles.header
      }, _react.default.createElement(_PositionBox.default, {
        position: positionToDisplay,
        headingText: positionText
      }), this.renderLeftHeader(), _react.default.createElement(_ActionButtons.default, {
        connectDragSource: this.props.connectDragSource,
        displayPosition: this.props.displayPosition,
        onDelete: this.removeItem,
        quizEntries: this.props.quizEntries,
        quizEntry: this.props.quizEntry,
        scrollKey: this.props.scrollKey,
        shouldDisableDragHandle: this.shouldDisableDragHandle(),
        switchOnEditing: this.editingOn,
        shouldFocusOnMount: this.props.editQuizEntryToggle
      }), _react.default.createElement(_ScreenReaderContent.default, null, srMsg)), _react.default.createElement("div", {
        className: styles.itemHolder,
        ref: this.setInert,
        "data-automation": "sdk-quiz-entry-show-item-holder"
      }, this.props.children))), _react.default.createElement(_DragAndDropZone.default, Object.assign({}, propsForDnDZone, {
        location: "below"
      })));
    }
  }]);
  QuizEntryShow.displayName = "QuizEntryShow";
  return QuizEntryShow;
}(_react.Component), _class2.propTypes = {
  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
  connectDragPreview: _propTypes.default.func.isRequired,
  connectDragSource: _propTypes.default.func.isRequired,
  displayPosition: _propTypes.default.number.isRequired,
  draggingOver: _propTypes.default.bool.isRequired,
  draggingAboveHalf: _propTypes.default.bool.isRequired,
  entry: _reactImmutableProptypes.default.record.isRequired,
  quizEntryWithErrorsShowing: _reactImmutableProptypes.default.record,
  quizEntries: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record).isRequired,
  quizEntry: _reactImmutableProptypes.default.record.isRequired,
  quizId: _propTypes.default.string.isRequired,
  removeQuizEntry: _propTypes.default.func.isRequired,
  // from connected component
  screenreaderNotification: _propTypes.default.func.isRequired,
  // from connected component
  scrollKey: _propTypes.default.string,
  switchOnEditing: _propTypes.default.func.isRequired,
  // from QuizEntry
  withConfirm: _propTypes.default.func.isRequired,
  editQuizEntryToggle: _propTypes.default.bool.isRequired
}, _class2.defaultProps = {
  children: null,
  draggingOver: false,
  draggingAboveHalf: false,
  quizEntryWithErrorsShowing: null,
  scrollKey: void 0,
  editQuizEntryToggle: false
}, _temp)) || _class);
var QuizEntryShowRaw = QuizEntryShow;
exports.QuizEntryShowRaw = QuizEntryShowRaw;

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

exports.default = _default;