"use strict";

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

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

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

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

var _TextInput = _interopRequireDefault(require("@instructure/ui-forms/lib/components/TextInput"));

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

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

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

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

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

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

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

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

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

var styles = {
  componentId: 'cYnzk',
  template: function template(theme) {
    return "\n\n.quiz-core__Header--header {\n  background-color: ".concat(theme.headerBackgroundColor || 'inherit', ";\n  color: ").concat(theme.headerColor || 'inherit', ";\n\n  padding: ").concat(theme.headerPadding || 'inherit', ";\n\n  display: flex;\n  justify-content: space-between;\n  vertical-align: middle;\n  align-items: center;\n}\n\n.quiz-core__Header--leftHeader {\n  flex: 8 0 0;\n  display: inline-flex;\n  flex-wrap: nowrap;\n  align-items: center;\n\n  \n\n  width: 100%;\n}\n\n.quiz-core__Header--interactionType {\n  font-size: ").concat(theme.interactionTypeFontSize || 'inherit', ";\n  margin-left: ").concat(theme.interactionTypeLeftMargin || 'inherit', ";\n  margin-right: ").concat(theme.interactionTypeRightMargin || 'inherit', ";\n}\n\n.quiz-core__Header--dividingLine {\n  width: 0;\n  border-left: ").concat(theme.dividingLineLeftBorder || 'inherit', ";\n}\n\n.quiz-core__Header--titleHolder {\n  display: flex;\n  flex: 1 1 auto;\n}\n\n.quiz-core__Header--titleInput {\n  flex: 1 1 auto;\n  font-size: ").concat(theme.titleInputFontSize || 'inherit', ";\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n");
  },
  'header': 'quiz-core__Header--header',
  'leftHeader': 'quiz-core__Header--leftHeader',
  'interactionType': 'quiz-core__Header--interactionType',
  'dividingLine': 'quiz-core__Header--dividingLine',
  'titleHolder': 'quiz-core__Header--titleHolder',
  'titleInput': 'quiz-core__Header--titleInput'
};
var QuizEntryHeader = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(QuizEntryHeader, _Component);

  function QuizEntryHeader() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this.connectDragSource = function (dragHandle) {
      if (_this.shouldDisableDragHandle()) {
        return dragHandle;
      }

      return _this.props.connectDragSource(dragHandle);
    };

    _this.clearModifications = function () {
      _this.props.clearModifications('items', _this.props.entry.id);
    };

    _this.removeTemporaryItem = function () {
      var remove = function remove() {
        _this.props.hideError(_this.props.guid);

        _this.clearModifications();

        _this.props.clearTemporaryItem(_this.props.quizId);

        _this.props.setUi(_constants.DELETED_QUIZ_ENTRY, {
          position: Math.ceil(_this.props.quizEntry.position),
          inStimulus: _this.props.quizEntry.hasStimulus
        });
      };

      _this.props.withConfirm(remove, _this.removalDialogData());
    };

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

    _this.removeItem = function (e) {
      if (_this.props.disabledForRegrade) {
        return null;
      }

      _this.props.entry.isTemporary() ? _this.removeTemporaryItem() : _this.removeNormalItem();
    };

    _this.handleTitleChange = function (event) {
      _this.props.changeItemTitle(_this.props.entry.id, event.target.value);
    };

    _this.storeTitleRef = function (el) {
      _this.titleRef = el;
    };

    return _this;
  }

  (0, _createClass2.default)(QuizEntryHeader, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      // timeout is to ensure the screenreader reads the title label when focused
      setTimeout(function () {
        !_this2.props.initialFocusId && _this2.titleRef && _this2.titleRef.focus();
      }, 200); // without the 200, the black VO focus-box, and the actual focus
      // end up in different places after saving, and re-editing
    }
  }, {
    key: "removalDialogData",
    value: function removalDialogData() {
      return {
        title: "Ta bort f\xF6rem\xE5l?",
        text: "\xC4r du s\xE4ker p\xE5 att du vill ta bort detta f\xF6rem\xE5l?",
        continueText: "Ta bort f\xF6rem\xE5l",
        cancelText: "F\xF6rvara f\xF6rem\xE5l"
      };
    }
  }, {
    key: "getVOText",
    value: function getVOText(verb, displayPosition) {
      var name = '';

      if (this.props.entry instanceof _Item.default) {
        name = this.props.entry.getInteractionType().name;
      }

      return verb + " Fr\xE5ga " + displayPosition + ", " + name;
    }
  }, {
    key: "renderBankedContent",
    value: function renderBankedContent() {
      if (this.props.quizEntry.entryType === 'Bank' || this.props.quizEntry.entryType === 'BankEntry') {
        return _react.default.createElement(_IconBank.default, null);
      }
    }
  }, {
    key: "renderTitleHolder",
    value: function renderTitleHolder() {
      if (!(this.props.entry instanceof _Item.default)) return;
      var _this$props = this.props,
          entry = _this$props.entry,
          shouldClone = _this$props.shouldClone,
          quizEntry = _this$props.quizEntry,
          disabledForRegrade = _this$props.disabledForRegrade,
          displayPosition = _this$props.displayPosition,
          workingEntry = _this$props.workingEntry;
      var disabled = disabledForRegrade || entry.isImmutable() && !shouldClone || quizEntry.isBankEntry;
      var titleLabelText = "Fr\xE5ga " + displayPosition + ", " + entry.getInteractionType().name + ", Redigera fr\xE5gans titel";
      return _react.default.createElement("div", {
        className: styles.titleHolder
      }, _react.default.createElement("span", {
        className: styles.titleInput
      }, _react.default.createElement(_TextInput.default, {
        ref: this.storeTitleRef,
        label: _react.default.createElement(_ScreenReaderContent.default, null, titleLabelText),
        type: "text",
        placeholder: "Fr\xE5getitel",
        onChange: this.handleTitleChange,
        value: workingEntry.title || '',
        disabled: disabled,
        "data-automation": "sdk-question-title-textinput"
      })));
    }
  }, {
    key: "renderLeftHeader",
    value: function renderLeftHeader() {
      var positionText = "Redigera objektet vid " + _default_sv_number(this.props.displayPosition) + ".";
      return _react.default.createElement("div", {
        className: styles.leftHeader
      }, _react.default.createElement(_PositionBox.default, {
        position: this.props.quizEntry.positionToDisplay(this.props.displayPosition),
        headingText: positionText,
        "data-automation": "sdk-quiz-entry-positionbox"
      }), this.renderBankedContent(), _react.default.createElement("div", {
        className: styles.interactionType,
        "data-automation": "sdk-quiz-entry-interaction-type"
      }, this.props.name), _react.default.createElement("div", {
        className: styles.dividingLine
      }), this.renderTitleHolder());
    }
  }, {
    key: "render",
    value: function render() {
      var actionButtonProps = {
        connectDragSource: this.connectDragSource,
        displayPosition: this.props.displayPosition,
        onDelete: this.removeItem,
        deleteText: this.getVOText('Remove', this.props.displayPosition),
        quizEntries: this.props.quizEntries,
        quizEntry: this.props.quizEntry,
        shouldDisableDragHandle: true,
        shouldDisableDeleteButton: this.props.disabledForRegrade,
        shouldRenderEdit: false
      };
      return _react.default.createElement("div", {
        className: styles.header
      }, this.renderLeftHeader(), _react.default.createElement(_ActionButtons.default, actionButtonProps));
    }
  }]);
  QuizEntryHeader.displayName = "QuizEntryHeader";
  return QuizEntryHeader;
}(_react.Component), _class2.propTypes = {
  changeItemTitle: _propTypes.default.func.isRequired,
  // from connected component
  clearModifications: _propTypes.default.func.isRequired,
  // from connected component
  clearTemporaryItem: _propTypes.default.func.isRequired,
  // from connected component
  connectDragSource: _propTypes.default.func.isRequired,
  // inserted from React DnD
  disabledForRegrade: _propTypes.default.bool,
  displayPosition: _propTypes.default.number.isRequired,
  entry: _reactImmutableProptypes.default.record.isRequired,
  guid: _propTypes.default.string.isRequired,
  hideError: _propTypes.default.func.isRequired,
  // from connected component
  initialFocusId: _propTypes.default.string,
  name: _propTypes.default.string,
  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
  setUi: _propTypes.default.func.isRequired,
  shouldClone: _propTypes.default.bool,
  withConfirm: _propTypes.default.func.isRequired,
  workingEntry: _reactImmutableProptypes.default.record.isRequired
}, _class2.defaultProps = {
  disabledForRegrade: false,
  name: null,
  shouldClone: false,
  initialFocusId: null
}, _temp)) || _class);
var _default = QuizEntryHeader;
exports.default = _default;