"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 _View = _interopRequireDefault(require("@instructure/ui-layout/lib/components/View"));

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

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

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

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

var _Text = _interopRequireDefault(require("@instructure/ui-elements/lib/components/Text"));

var _Grid = _interopRequireWildcard(require("@instructure/ui-layout/lib/components/Grid"));

var _Alert = _interopRequireDefault(require("@instructure/ui-alerts/lib/components/Alert"));

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

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

var _BankSelection = _interopRequireDefault(require("../../../../../../common/components/resources/BankSelection"));

var _QuizEntry = _interopRequireDefault(require("../../../../../../common/records/QuizEntry"));

var _Bank = _interopRequireDefault(require("../../../../../../common/records/Bank"));

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

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

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'bRxwg',
  template: function template(theme) {
    return "\n\n.quiz-core__QuizEntryBankEdit--marginAdd {\n  margin: ".concat(theme.marginAddMargin || 'inherit', ";\n}\n\n.quiz-core__QuizEntryBankEdit--quizEntryBankEdit {\n  background-color: ").concat(theme.quizEntryBankEditBackgroundColor || 'inherit', ";\n  border: ").concat(theme.quizEntryBankEditBorderSize || 'inherit', " dashed ").concat(theme.quizEntryBankEditBorderColor || 'inherit', ";\n  padding: ").concat(theme.quizEntryBankEditPadding || 'inherit', ";\n  margin: ").concat(theme.quizEntryBankEditMargin || 'inherit', ";\n}\n\n.quiz-core__QuizEntryBankEdit--quizEntryBankText {\n  text-align: left;\n}\n\n[dir=\"ltr\"] .quiz-core__QuizEntryBankEdit--quizEntryBankText {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .quiz-core__QuizEntryBankEdit--quizEntryBankText {\n  text-align: left;\n}\n\n.quiz-core__QuizEntryBankEdit--numberInput {\n  font-size: ").concat(theme.numberInputFontSize || 'inherit', ";\n  display: inline-flex;\n  padding: ").concat(theme.numberInputPadding || 'inherit', ";\n  padding-bottom: 0;\n  padding-left: ").concat(theme.numberInputLeftPadding || 'inherit', ";\n}\n\n.quiz-core__QuizEntryBankEdit--borderLine {\n  margin-top: ").concat(theme.borderLineTopMargin || 'inherit', ";\n  margin-bottom: ").concat(theme.borderLineBottomMargin || 'inherit', ";\n  border-bottom: solid ").concat(theme.borderLineBottomBorderSize || 'inherit', " ").concat(theme.borderLineBottomBorderColor || 'inherit', ";\n}\n");
  },
  'marginAdd': 'quiz-core__QuizEntryBankEdit--marginAdd',
  'quizEntryBankEdit': 'quiz-core__QuizEntryBankEdit--quizEntryBankEdit',
  'quizEntryBankText': 'quiz-core__QuizEntryBankEdit--quizEntryBankText',
  'numberInput': 'quiz-core__QuizEntryBankEdit--numberInput',
  'borderLine': 'quiz-core__QuizEntryBankEdit--borderLine'
};
var QuizEntryBankEdit = (_dec = (0, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(QuizEntryBankEdit, _Component);

  function QuizEntryBankEdit() {
    var _getPrototypeOf2;

    var _this;

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

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

    _this.clearChanges = function () {
      _this.props.clearModifications('quizEntries', _this.props.quizEntry.id);
    };

    _this.handlePointsChange = function (event, points, normalizedPoints) {
      _this.props.changeQuizEntryPoints(_this.props.quizEntry.id, normalizedPoints || '0');
    };

    _this.onPropertiesChange = function (properties) {
      _this.props.changeQuizEntryProperties(_this.props.quizEntry.id, properties);
    };

    _this.onBankSelection = function (event, option) {
      _this.props.changeQuizEntryEntry(_this.props.quizEntry.id, option.value);
    };

    _this.handleQuestionChange = function (event, selection) {
      _this.onPropertiesChange({
        sampleNum: _this.props.sampleNum,
        selection: selection
      });
    };

    _this.handleSampleNumChange = function (event, sampleNum, normalizedSampleNum) {
      _this.onPropertiesChange({
        sampleNum: normalizedSampleNum || '0',
        selection: _this.props.questionSelection
      });
    };

    _this.sampleNumErrors = function () {
      return _this.props.workingQuizEntry.sampleNumErrors();
    };

    _this.pointsPossibleErrors = function () {
      return _this.props.workingQuizEntry.pointsPossibleErrors();
    };

    _this.submitHandler = function () {
      var properties = {};

      if (_this.props.questionSelection === 'all') {
        properties.sampleNum = null;
      } else {
        properties.sampleNum = _this.props.sampleNum;
      }

      _this.props.updateQuizEntry(_this.props.quizId, _this.props.quizEntry.id, {
        properties: properties,
        pointsPossible: _this.props.pointsPossible,
        entryId: _this.props.workingBank.id
      });

      _this.props.clearModifications();
    };

    _this.renderPointsPossibleRow = function () {
      return _react.default.createElement(_Grid.GridRow, null, _react.default.createElement(_Grid.GridCol, {
        width: 3
      }, _react.default.createElement(_Text.default, null, "Punkte pro Frage")), _react.default.createElement(_Grid.GridCol, {
        width: 9
      }, _react.default.createElement(_quizNumberInput.default, {
        label: _react.default.createElement(_ScreenReaderContent.default, null, "Punkte pro Frage"),
        onChange: _this.handlePointsChange,
        value: _this.props.pointsPossible,
        width: "5rem",
        inline: true,
        messages: _this.pointsPossibleErrors()
      })));
    };

    return _this;
  }

  (0, _createClass2.default)(QuizEntryBankEdit, [{
    key: "renderQuestionSelectRadioGroup",
    value: function renderQuestionSelectRadioGroup() {
      return _react.default.createElement(_RadioInputGroup.default, {
        name: "questionSelect",
        defaultValue: this.props.questionSelection,
        onChange: this.handleQuestionChange
      }, _react.default.createElement(_RadioInput.default, {
        key: "all",
        value: "all",
        label: "Alle Fragen verwenden"
      }), _react.default.createElement(_RadioInput.default, {
        key: "rand",
        value: "rand",
        label: "Fragen zuf\xE4llig ausw\xE4hlen"
      }));
    }
  }, {
    key: "renderRandomQuestionSelectionRow",
    value: function renderRandomQuestionSelectionRow() {
      if (this.props.questionSelection === 'all') {
        return;
      }

      return _react.default.createElement(_Grid.GridRow, null, _react.default.createElement(_Grid.GridCol, {
        width: 3
      }, _react.default.createElement(_Text.default, null, "Anzahl Fragen")), _react.default.createElement(_Grid.GridCol, {
        width: 9
      }, _react.default.createElement(_quizNumberInput.default, {
        label: _react.default.createElement(_ScreenReaderContent.default, null, "Anzahl Fragen"),
        onChange: this.handleSampleNumChange,
        value: this.props.sampleNum,
        min: 1,
        width: "5rem",
        inline: true,
        messages: this.sampleNumErrors()
      })));
    }
  }, {
    key: "renderQuestionNumberInputs",
    value: function renderQuestionNumberInputs() {
      return _react.default.createElement(_Grid.default, {
        vAlign: "middle",
        rowSpacing: "small"
      }, this.renderRandomQuestionSelectionRow(), this.renderPointsPossibleRow());
    }
  }, {
    key: "renderContent",
    value: function renderContent() {
      return _react.default.createElement("div", {
        className: styles.quizEntryBankText
      }, _react.default.createElement(_BankSelection.default, {
        label: "W\xE4hlen Sie den Quellpool",
        selectedBank: this.props.workingBank,
        onBankSelection: this.onBankSelection
      }), _react.default.createElement("br", null), this.renderQuestionSelectRadioGroup(), _react.default.createElement("br", null), this.renderQuestionNumberInputs());
    }
  }, {
    key: "renderErrors",
    value: function renderErrors() {
      if (this.props.workingBank.archived) {
        return _react.default.createElement(_Alert.default, {
          variant: "error"
        }, _react.default.createElement(_Text.default, null, "Objektpool existiert nicht mehr!"));
      }
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", {
        className: styles.quizEntryBankEdit
      }, this.renderErrors(), this.renderContent(), _react.default.createElement("div", {
        className: styles.borderLine
      }), _react.default.createElement(_View.default, {
        textAlign: "end"
      }, _react.default.createElement(_EntrySave.default, {
        clearChanges: this.clearChanges,
        displayPosition: this.props.displayPosition,
        disableSubmit: !this.props.workingQuizEntry.isValid(),
        entry: this.props.workingBank,
        guid: this.props.guid,
        submitHandler: this.submitHandler
      })));
    }
  }]);
  QuizEntryBankEdit.displayName = "QuizEntryBankEdit";
  return QuizEntryBankEdit;
}(_react.Component), _class2.propTypes = {
  changeQuizEntryPoints: _propTypes.default.func.isRequired,
  changeQuizEntryProperties: _propTypes.default.func.isRequired,
  changeQuizEntryEntry: _propTypes.default.func.isRequired,
  clearModifications: _propTypes.default.func.isRequired,
  displayPosition: _propTypes.default.number.isRequired,
  guid: _propTypes.default.string.isRequired,
  // used for makeEditable
  pointsPossible: _propTypes.default.string.isRequired,
  questionSelection: _propTypes.default.string.isRequired,
  quizEntry: _propTypes.default.instanceOf(_QuizEntry.default).isRequired,
  quizId: _propTypes.default.string.isRequired,
  sampleNum: _propTypes.default.string.isRequired,
  updateQuizEntry: _propTypes.default.func.isRequired,
  workingBank: _propTypes.default.instanceOf(_Bank.default).isRequired,
  workingQuizEntry: _propTypes.default.instanceOf(_QuizEntry.default).isRequired
}, _temp)) || _class);
exports.default = QuizEntryBankEdit;