"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 _getPrototypeOf2 = _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 _ScreenReaderContent = _interopRequireDefault(require("@instructure/ui-a11y/lib/components/ScreenReaderContent"));

var _quizNumberInput = _interopRequireDefault(require("@instructure/quiz-number-input"));

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

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

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

var _IconDiscussion2 = _interopRequireDefault(require("@instructure/ui-icons/lib/Solid/IconDiscussion"));

var _interactionPoints = _interopRequireDefault(require("quiz-interactions/lib/util/interactionPoints"));

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

var _EntrySave = _interopRequireDefault(require("../../../../../../common/components/resources/entry/EntrySave"));

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

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'fFUmw',
  template: function template(theme) {
    return "\n\n.Footer__styles__footer {\n  background-color: ".concat(theme.footerBackgroundColor || 'inherit', ";\n  color: ").concat(theme.footerColor || 'inherit', ";\n\n  padding: ").concat(theme.footerPadding || 'inherit', ";\n\n  display: flex;\n  justify-content: space-between;\n  vertical-align: middle;\n  align-items: center;\n}\n\n.Footer__styles__leftFooter {\n  flex: 8 0 0;\n  display: inline-flex;\n  flex-wrap: nowrap;\n  align-items: center;\n}\n\n.Footer__styles__rightFooter {\n  flex: 0 0 auto;\n  display: inline-flex;\n  text-align: right;\n}\n\n[dir=\"ltr\"] .Footer__styles__rightFooter {\n  text-align: right;\n}\n\n[dir=\"rtl\"] .Footer__styles__rightFooter {\n  text-align: right;\n}\n\n.Footer__styles__pointsSection,\n.Footer__styles__feedbackSection {\n  display: flex;\n}\n\n.Footer__styles__feedbackSection {\n  margin-left: ").concat(theme.feedbackSectionLeftMargin || 'inherit', ";\n}\n\n.Footer__styles__pointsInput {\n  width: 6rem;\n  font-size: ").concat(theme.pointsInputFontSize || 'inherit', ";\n  display: inline-flex;\n}\n\n.Footer__styles__pointsText {\n  display: inline-flex;\n  font-size: ").concat(theme.pointsTextFontSize || 'inherit', ";\n  align-self: center;\n  vertical-align: middle;\n  margin-left: ").concat(theme.pointsTextLeftMargin || 'inherit', ";\n}\n");
  },
  'footer': 'Footer__styles__footer',
  'leftFooter': 'Footer__styles__leftFooter',
  'rightFooter': 'Footer__styles__rightFooter',
  'pointsSection': 'Footer__styles__pointsSection',
  'feedbackSection': 'Footer__styles__feedbackSection',
  'pointsInput': 'Footer__styles__pointsInput',
  'pointsText': 'Footer__styles__pointsText'
};

function pointsAsFloat(pointsString) {
  return parseFloat(pointsString) || 0;
}

var QuizEntryEditFooter = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(QuizEntryEditFooter, _Component);

  function QuizEntryEditFooter() {
    var _this;

    (0, _classCallCheck2.default)(this, QuizEntryEditFooter);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(QuizEntryEditFooter).apply(this, arguments));
    _this.addFeedbackButton = null;

    _this.openFeedbackModal = function () {
      var workingEntry = _this.props.workingEntry;

      _this.props.setUi(_constants.ITEM_FEEDBACK_MODAL_ITEM, workingEntry);

      _this.props.setUi(_constants.ITEM_FEEDBACK_MODAL_FEEDBACK, workingEntry.feedback);

      _this.props.openModal(_constants.ITEM_FEEDBACK_MODAL, {
        modalTrigger: _this.addFeedbackButton
      });
    };

    _this.handlePointsBlur = function () {
      if (!_this.state.normalizedPoints) {
        _this.setState({
          points: '0'
        });
      }
    };

    _this.handlePointsChange = function (event, points, normalizedPoints) {
      var pointsFloat = pointsAsFloat(normalizedPoints);

      if (pointsFloat !== _this.getPoints()) {
        _this.props.changeQuizEntryPoints(_this.props.quizEntry.id, pointsFloat);
      }

      _this.setState({
        points: points,
        normalizedPoints: normalizedPoints
      });
    };

    _this.handleButtonRef = function (node) {
      _this.addFeedbackButton = node;
    };

    var _points = _this.getPoints();

    _this.state = {
      points: _points,
      normalizedPoints: _points
    };
    return _this;
  }

  (0, _createClass2.default)(QuizEntryEditFooter, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var points = this.getPoints(nextProps);
      this.setState({
        points: points,
        normalizedPoints: points
      });
    }
  }, {
    key: "getPoints",
    value: function getPoints() {
      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
      var _props$workingQuizEnt = props.workingQuizEntry,
          regradeAdjustedPointsPossible = _props$workingQuizEnt.regradeAdjustedPointsPossible,
          pointsPossible = _props$workingQuizEnt.pointsPossible;
      return regradeAdjustedPointsPossible || pointsPossible || 0;
    }
  }, {
    key: "pointsDisabled",
    value: function pointsDisabled() {
      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
      var workingEntry = props.workingEntry;
      var pointsFromItem = (0, _interactionPoints.default)(workingEntry.toJS()) !== void 0;
      return pointsFromItem;
    }
  }, {
    key: "renderFeedbackSection",
    value: function renderFeedbackSection() {
      var _this$props = this.props,
          entry = _this$props.entry,
          shouldClone = _this$props.shouldClone,
          quizEntry = _this$props.quizEntry,
          workingEntry = _this$props.workingEntry;
      var disabled = entry.isImmutable() && !shouldClone || quizEntry.isBankEntry;
      var icon, text;

      if (workingEntry.hasFeedback()) {
        icon = _IconDiscussion2.default;
        text = "Rediger tilbakemelding p\xE5 element-niv\xE5 (n\xE5v\xE6rende)";
      } else {
        icon = _IconDiscussion.default;
        text = "Redigere elementniv\xE5 tilbakemelding";
      }

      return _react.default.createElement("div", {
        className: styles.feedbackSection
      }, _react.default.createElement(_Button.default, {
        variant: "icon",
        onClick: this.openFeedbackModal,
        disabled: disabled,
        ref: this.handleButtonRef,
        "data-automation": "sdk-open-feedback-modal-button",
        icon: icon
      }, _react.default.createElement(_ScreenReaderContent.default, null, text)));
    }
  }, {
    key: "renderPointsSection",
    value: function renderPointsSection() {
      return _react.default.createElement("div", {
        className: styles.pointsSection
      }, _react.default.createElement("span", {
        className: styles.pointsInput
      }, _react.default.createElement(_quizNumberInput.default, {
        label: _react.default.createElement(_ScreenReaderContent.default, null, "Angivelse mulige poeng"),
        onChange: this.handlePointsChange,
        onBlur: this.handlePointsBlur,
        value: this.state.points,
        disabled: this.pointsDisabled(),
        "data-automation": "sdk-points-possible-numberinput"
      })), _react.default.createElement("span", {
        className: styles.pointsText
      }, "Poeng"));
    }
  }, {
    key: "renderLeftFooter",
    value: function renderLeftFooter() {
      return _react.default.createElement("div", {
        className: styles.leftFooter
      }, this.renderPointsSection(), this.renderFeedbackSection());
    }
  }, {
    key: "renderRightFooter",
    value: function renderRightFooter() {
      if (this.props.alternativeRightFooter) {
        return this.props.alternativeRightFooter();
      }

      return _react.default.createElement(_EntrySave.default, {
        clearChanges: this.props.clearChanges,
        disableSubmit: this.props.disableSubmit,
        displayPosition: this.props.displayPosition,
        entry: this.props.entry,
        guid: this.props.guid,
        isValid: this.props.isValid,
        submitHandler: this.props.successfulSubmit,
        initialFocusId: this.props.initialFocusId
      });
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", {
        className: styles.footer
      }, this.renderLeftFooter(), this.renderRightFooter());
    }
  }]);
  QuizEntryEditFooter.displayName = "QuizEntryEditFooter";
  return QuizEntryEditFooter;
}(_react.Component), _class2.propTypes = {
  alternativeRightFooter: _propTypes.default.func,
  changeQuizEntryPoints: _propTypes.default.func.isRequired,
  clearChanges: _propTypes.default.func.isRequired,
  disableSubmit: _propTypes.default.bool,
  displayPosition: _propTypes.default.number.isRequired,
  entry: _reactImmutableProptypes.default.record.isRequired,
  guid: _propTypes.default.string.isRequired,
  initialFocusId: _propTypes.default.string,
  isValid: _propTypes.default.bool.isRequired,
  openModal: _propTypes.default.func.isRequired,
  quizEntry: _reactImmutableProptypes.default.record.isRequired,
  setUi: _propTypes.default.func.isRequired,
  shouldClone: _propTypes.default.bool,
  successfulSubmit: _propTypes.default.func.isRequired,
  workingEntry: _reactImmutableProptypes.default.record.isRequired,
  // This prop is flagged as unused, but it is actually used
  // eslint-disable-next-line react/no-unused-prop-types
  workingQuizEntry: _reactImmutableProptypes.default.record.isRequired
}, _class2.defaultProps = {
  alternativeRightFooter: null,
  disableSubmit: false,
  shouldClone: false,
  initialFocusId: null
}, _temp)) || _class);
exports.default = QuizEntryEditFooter;