"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-common/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_enAU_number = Intl.NumberFormat("en-AU", { style: "decimal" }).format;

var styles = {
  componentId: 'bxAMG',
  template: function template(theme) {
    return "\n\n.bxAMG_eLmg{transform:translateZ(0)}\n\n.bxAMG_TMNr{background-color:".concat(theme.quizEntryShowBackgroundColor || 'inherit', ";padding:").concat(theme.quizEntryShowPadding || 'inherit', "}\n\n.bxAMG_fsuY{align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;height:").concat(theme.headerHeight || 'inherit', ";padding-right:").concat(theme.headerRightPadding || 'inherit', "}\n\n.bxAMG_bscQ{border:").concat(theme.dndBorder || 'inherit', "}\n\n.bxAMG_cKlw{align-items:center;display:inline-flex;flex:8 0 0;overflow:hidden}\n\n.bxAMG_IoDT{color:").concat(theme.rightHeaderColor || 'inherit', ";display:inline-flex;flex:0 0 auto;text-align:right;z-index:").concat(theme.rightHeaderZIndex || 'inherit', "}\n\n[dir=ltr] .bxAMG_IoDT,[dir=rtl] .bxAMG_IoDT{text-align:right}\n\n.bxAMG_IoDT button{background-color:transparent;background-color:initial}\n\n.bxAMG_eCZW,.bxAMG_cwte,.bxAMG_nvdO{color:").concat(theme.titleInteractionTypeNamePointsColor || 'inherit', ";font-size:").concat(theme.titleInteractionTypeNamePointsFontSize || 'inherit', ";margin-left:").concat(theme.titleInteractionTypeNamePointsLeftMargin || 'inherit', ";margin-right:").concat(theme.titleInteractionTypeNamePointsRightMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.bxAMG_csjx{margin:").concat(theme.itemHolderMargin || 'inherit', "}\n\n.bxAMG_fPOQ,.bxAMG_gaTA{background-color:transparent;border:none;color:inherit;font-size:").concat(theme.optionsButtonDragDropHandleFontSize || 'inherit', ";margin:").concat(theme.optionsButtonDragDropHandleMargin || 'inherit', "}\n\n.bxAMG_gaTA{cursor:pointer}");
  },
  'quizEntryWrapper': 'bxAMG_eLmg',
  'quizEntryShow': 'bxAMG_TMNr',
  'header': 'bxAMG_fsuY',
  'dndBorder': 'bxAMG_bscQ',
  'leftHeader': 'bxAMG_cKlw',
  'rightHeader': 'bxAMG_IoDT',
  'interactionTypeName': 'bxAMG_eCZW',
  'points': 'bxAMG_cwte',
  'title': 'bxAMG_nvdO',
  'itemHolder': 'bxAMG_csjx',
  'dragAndDropHandle': 'bxAMG_fPOQ',
  'optionsButton': 'bxAMG_gaTA'
};

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

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 = "Item switched to editing mode.";

        _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, _i, _v;

      return _s = points, _n = +_s, (_i = Math.floor(Math.abs(+_s)), _v = (_s + '.').split('.')[1].length, _i === 1 && _v === 0 ? _default_enAU_number(points) + " point" : _default_enAU_number(points) + " points");
    }
  }, {
    key: "removalDialogData",
    value: function removalDialogData() {
      return {
        title: "Remove Item?",
        text: "Are you sure you want to remove this item?",
        continueText: "Remove Item",
        cancelText: "Keep Item"
      };
    }
  }, {
    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 _ref;
      }
    }
  }, {
    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 = "Preview of item at position " + positionToDisplay;
      var srMsg = "The following item is a preview for the teacher. To edit this item, navigate back to the \"Edit Item\" button and click.";
      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;