"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.Main = void 0;

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

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

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

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

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

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

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

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

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));

var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));

var _pick = _interopRequireDefault(require("lodash/pick"));

var _throttle = _interopRequireDefault(require("lodash/throttle"));

var _editableHtml = require("@pie-lib/pie-toolbox/editable-html");

var _configUi = require("@pie-lib/pie-toolbox/config-ui");

var _styles = require("@material-ui/core/styles");

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));

var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));

var _ecrToolbar = _interopRequireDefault(require("./ecr-toolbar"));

var _alternateResponses = _interopRequireDefault(require("./alternateResponses"));

var _markupUtils = require("./markupUtils");

var _utils = require("./utils");

var _classnames = _interopRequireDefault(require("classnames"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var toggle = _configUi.settings.toggle,
    Panel = _configUi.settings.Panel,
    dropdown = _configUi.settings.dropdown;

var styles = function styles(theme) {
  return {
    promptHolder: {
      width: '100%',
      paddingTop: theme.spacing.unit * 2,
      marginBottom: theme.spacing.unit * 2
    },
    markup: {
      minHeight: '100px',
      paddingTop: theme.spacing.unit,
      width: '100%',
      '& [data-slate-editor="true"]': {
        minHeight: '100px'
      }
    },
    choiceConfiguration: {
      paddingTop: theme.spacing.unit * 2,
      paddingBottom: theme.spacing.unit * 2
    },
    switchElement: {
      justifyContent: 'space-between',
      margin: 0
    },
    addButton: {
      "float": 'right'
    },
    text: {
      fontSize: theme.typography.fontSize + 2
    },
    tooltip: {
      fontSize: theme.typography.fontSize - 2,
      whiteSpace: 'pre',
      maxWidth: '500px'
    },
    errorText: {
      fontSize: theme.typography.fontSize - 2,
      color: theme.palette.error.main,
      paddingTop: theme.spacing.unit
    },
    flexContainer: {
      display: 'flex',
      alignItems: 'center'
    },
    responseHeader: {
      marginTop: theme.spacing.unit * 3,
      marginBottom: theme.spacing.unit
    }
  };
};

var createElementFromHTML = function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();
  return div;
};

var Main = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(Main, _React$Component);

  var _super = _createSuper(Main);

  function Main() {
    var _this;

    (0, _classCallCheck2["default"])(this, Main);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {});
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onModelChange", function (newVal) {
      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), newVal));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPromptChanged", function (prompt) {
      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
        prompt: prompt
      }));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRationaleChanged", function (rationale) {
      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
        rationale: rationale
      }));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTeacherInstructionsChanged", function (teacherInstructions) {
      var _this$props = _this.props,
          model = _this$props.model,
          onModelChanged = _this$props.onModelChanged;
      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
        teacherInstructions: teacherInstructions
      }));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMarkupChanged", function (slateMarkup) {
      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
        slateMarkup: slateMarkup
      }));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResponsesChanged", function (choices) {
      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
        choices: choices
      }));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onLengthChanged", function (maxLengthPerChoice) {
      var _this$props2 = _this.props,
          model = _this$props2.model,
          onModelChanged = _this$props2.onModelChanged;
      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
        maxLengthPerChoice: maxLengthPerChoice
      }));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeResponse", function (index, newVal) {
      var _this$props3 = _this.props,
          model = _this$props3.model,
          onModelChanged = _this$props3.onModelChanged;
      var choices = model.choices;
      var maxLengthPerChoice = model.maxLengthPerChoice;
      var newValLength = (newVal || '').length;

      if (!choices[index]) {
        choices[index] = [{
          label: newVal || '',
          value: '0'
        }]; // add default values for missing choices up to the new index position

        var nbOfMissingChoices = index > maxLengthPerChoice.length ? index - maxLengthPerChoice.length : 0;
        maxLengthPerChoice = [].concat((0, _toConsumableArray2["default"])(maxLengthPerChoice), (0, _toConsumableArray2["default"])(Array(nbOfMissingChoices).fill(1)));
        maxLengthPerChoice.splice(index, 0, (0, _markupUtils.getAdjustedLength)(newValLength));
      } else {
        choices[index][0].label = newVal || '';

        if (maxLengthPerChoice && (maxLengthPerChoice[index] < newValLength || maxLengthPerChoice[index] > newValLength + 10)) {
          maxLengthPerChoice[index] = (0, _markupUtils.getAdjustedLength)(newValLength);
        }
      }

      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
        choices: choices,
        maxLengthPerChoice: maxLengthPerChoice
      }));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (markup) {
      var _this$props4 = _this.props,
          _this$props4$model = _this$props4.model,
          choices = _this$props4$model.choices,
          maxLengthPerChoice = _this$props4$model.maxLengthPerChoice,
          onModelChanged = _this$props4.onModelChanged;
      var domMarkup = createElementFromHTML(markup);
      var allRespAreas = domMarkup.querySelectorAll('[data-type="explicit_constructed_response"]');
      var allChoices = {};
      var updatedMaxLengthPerChoice = [];
      allRespAreas.forEach(function (el, index) {
        var newChoices = (0, _cloneDeep["default"])(choices[el.dataset.index]);

        if (newChoices) {
          newChoices[0] = {
            label: el.dataset.value || '',
            value: '0'
          };
          updatedMaxLengthPerChoice[index] = maxLengthPerChoice[el.dataset.index];
        }

        allChoices[index] = newChoices;
        el.dataset.index = index;
      });

      var callback = function callback() {
        return onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
          choices: allChoices,
          slateMarkup: domMarkup.innerHTML,
          maxLengthPerChoice: updatedMaxLengthPerChoice
        }));
      };

      _this.setState({
        cachedChoices: undefined
      }, callback);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onHandleAreaChange", (0, _throttle["default"])(function (nodes) {
      var _this$props5 = _this.props,
          choices = _this$props5.model.choices,
          onModelChanged = _this$props5.onModelChanged;
      var cachedChoices = _this.state.cachedChoices;

      if (!nodes) {
        return;
      }

      var newChoices = choices ? (0, _cloneDeep["default"])(choices) : {};
      var newCachedChoices = cachedChoices ? (0, _cloneDeep["default"])(cachedChoices) : {};
      nodes.forEach(function (node) {
        var keyForNode = node.data.get('index');

        if (!newChoices[keyForNode] && newCachedChoices[keyForNode]) {
          Object.assign(newChoices, (0, _pick["default"])(newCachedChoices, keyForNode));

          if (newCachedChoices.hasOwnProperty(keyForNode)) {
            delete newCachedChoices[keyForNode];
          }
        } else {
          Object.assign(newCachedChoices, (0, _pick["default"])(newChoices, keyForNode));

          if (newChoices.hasOwnProperty(keyForNode)) {
            delete newChoices[keyForNode];
          }
        }
      });

      var callback = function callback() {
        return onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
          choices: newChoices
        }));
      };

      _this.setState({
        cachedChoices: newCachedChoices
      }, callback);
    }, 500, {
      trailing: false,
      leading: true
    }));
    return _this;
  }

  (0, _createClass2["default"])(Main, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props6 = this.props,
          _this$props6$model = _this$props6.model,
          slateMarkup = _this$props6$model.slateMarkup,
          choices = _this$props6$model.choices,
          _this$props6$model$ma = _this$props6$model.maxLengthPerChoice,
          maxLengthPerChoice = _this$props6$model$ma === void 0 ? [] : _this$props6$model$ma,
          onModelChanged = _this$props6.onModelChanged;
      var undefinedLengths = !maxLengthPerChoice.length;
      this.setState({
        markup: slateMarkup
      }); // calculate maxLengthPerChoice array if it is not defined or defined incorrectly

      Object.values(choices).forEach(function (choice, index) {
        var labelLengthsArr = (choice || []).map(function (choice) {
          return (choice.label || '').length;
        });
        var length = Math.max.apply(Math, (0, _toConsumableArray2["default"])(labelLengthsArr));

        if (undefinedLengths || !maxLengthPerChoice[index] || maxLengthPerChoice[index] < length || maxLengthPerChoice[index] > length + 10) {
          maxLengthPerChoice[index] = (0, _markupUtils.getAdjustedLength)(length);
        }
      });
      onModelChanged(_objectSpread(_objectSpread({}, this.props.model), {}, {
        maxLengthPerChoice: maxLengthPerChoice
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props7 = this.props,
          classes = _this$props7.classes,
          model = _this$props7.model,
          configuration = _this$props7.configuration,
          onConfigurationChanged = _this$props7.onConfigurationChanged,
          imageSupport = _this$props7.imageSupport,
          uploadSoundSupport = _this$props7.uploadSoundSupport;

      var _ref = configuration || {},
          _ref$baseInputConfigu = _ref.baseInputConfiguration,
          baseInputConfiguration = _ref$baseInputConfigu === void 0 ? {} : _ref$baseInputConfigu,
          _ref$contentDimension = _ref.contentDimensions,
          contentDimensions = _ref$contentDimension === void 0 ? {} : _ref$contentDimension,
          _ref$maxImageWidth = _ref.maxImageWidth,
          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
          _ref$maxImageHeight = _ref.maxImageHeight,
          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
          _ref$maxLengthPerChoi = _ref.maxLengthPerChoice,
          maxLengthPerChoice = _ref$maxLengthPerChoi === void 0 ? {} : _ref$maxLengthPerChoi,
          maxResponseAreas = _ref.maxResponseAreas,
          _ref$partialScoring = _ref.partialScoring,
          partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring,
          _ref$playerSpellCheck = _ref.playerSpellCheck,
          playerSpellCheck = _ref$playerSpellCheck === void 0 ? {} : _ref$playerSpellCheck,
          _ref$prompt = _ref.prompt,
          prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
          _ref$rationale = _ref.rationale,
          rationale = _ref$rationale === void 0 ? {} : _ref$rationale,
          _ref$template = _ref.template,
          template = _ref$template === void 0 ? {} : _ref$template,
          settingsPanelDisabled = _ref.settingsPanelDisabled,
          _ref$spellCheck = _ref.spellCheck,
          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
          _ref$editSource = _ref.editSource,
          editSource = _ref$editSource === void 0 ? {} : _ref$editSource,
          _ref$teacherInstructi = _ref.teacherInstructions,
          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
          _ref$withRubric = _ref.withRubric,
          withRubric = _ref$withRubric === void 0 ? {} : _ref$withRubric,
          _ref$mathMlOptions = _ref.mathMlOptions,
          mathMlOptions = _ref$mathMlOptions === void 0 ? {} : _ref$mathMlOptions,
          _ref$language = _ref.language,
          language = _ref$language === void 0 ? {} : _ref$language,
          _ref$languageChoices = _ref.languageChoices,
          languageChoices = _ref$languageChoices === void 0 ? {} : _ref$languageChoices;

      var _ref2 = model || {},
          errors = _ref2.errors,
          maxLengthPerChoiceEnabled = _ref2.maxLengthPerChoiceEnabled,
          promptEnabled = _ref2.promptEnabled,
          rationaleEnabled = _ref2.rationaleEnabled,
          spellCheckEnabled = _ref2.spellCheckEnabled,
          teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
          toolbarEditorPosition = _ref2.toolbarEditorPosition;

      var _ref3 = errors || {},
          _ref3$choices = _ref3.choices,
          choicesErrors = _ref3$choices === void 0 ? {} : _ref3$choices,
          promptError = _ref3.prompt,
          rationaleError = _ref3.rationale,
          responseAreasError = _ref3.responseAreas,
          teacherInstructionsError = _ref3.teacherInstructions;

      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
      var toolbarOpts = {
        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
      };
      var panelSettings = {
        partialScoring: partialScoring.settings && toggle(partialScoring.label),
        maxLengthPerChoiceEnabled: maxLengthPerChoice.settings && toggle(maxLengthPerChoice.label),
        'language.enabled': language.settings && toggle(language.label, true),
        language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
      };
      var panelProperties = {
        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
        rationaleEnabled: rationale.settings && toggle(rationale.label),
        promptEnabled: prompt.settings && toggle(prompt.label),
        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
        playerSpellCheckEnabled: playerSpellCheck.settings && toggle(playerSpellCheck.label),
        rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label),
        'editSource.enabled': (editSource === null || editSource === void 0 ? void 0 : editSource.settings) && toggle(editSource.label, true)
      };

      var getPluginProps = function getPluginProps() {
        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
        return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
      };

      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
        dimensions: contentDimensions,
        hideSettings: settingsPanelDisabled,
        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
          model: model,
          configuration: configuration,
          onChangeModel: function onChangeModel(model) {
            return _this2.onModelChange(model);
          },
          onChangeConfiguration: function onChangeConfiguration(configuration) {
            return onConfigurationChanged(configuration, true);
          },
          groups: {
            Settings: panelSettings,
            Properties: panelProperties
          }
        })
      }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
        label: teacherInstructions.label,
        className: classes.promptHolder
      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
        className: classes.prompt,
        markup: model.teacherInstructions || '',
        onChange: this.onTeacherInstructionsChanged,
        imageSupport: imageSupport,
        nonEmpty: false,
        error: teacherInstructionsError,
        toolbarOpts: toolbarOpts,
        pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration),
        spellCheck: spellCheckEnabled,
        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
        uploadSoundSupport: uploadSoundSupport,
        languageCharactersProps: [{
          language: 'spanish'
        }, {
          language: 'special'
        }],
        mathMlOptions: mathMlOptions,
        autoWidthToolbar: true
      }), teacherInstructionsError && /*#__PURE__*/_react["default"].createElement("div", {
        className: classes.errorText
      }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
        label: prompt.label,
        className: classes.promptHolder
      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
        className: classes.prompt,
        markup: model.prompt,
        onChange: this.onPromptChanged,
        imageSupport: imageSupport,
        nonEmpty: false,
        disableUnderline: true,
        error: promptError,
        toolbarOpts: toolbarOpts,
        pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration),
        spellCheck: spellCheckEnabled,
        maxImageWidth: defaultImageMaxWidth,
        maxImageHeight: defaultImageMaxHeight,
        uploadSoundSupport: uploadSoundSupport,
        languageCharactersProps: [{
          language: 'spanish'
        }, {
          language: 'special'
        }],
        mathMlOptions: mathMlOptions,
        autoWidthToolbar: true
      }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
        className: classes.errorText
      }, promptError)), /*#__PURE__*/_react["default"].createElement("div", {
        className: classes.flexContainer
      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
        className: classes.text,
        component: "div"
      }, "Define Template, Choices, and Correct Responses"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
        classes: {
          tooltip: classes.tooltip
        },
        disableFocusListener: true,
        disableTouchListener: true,
        placement: 'right',
        title: validationMessage
      }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
        fontSize: 'small',
        color: 'primary',
        style: {
          marginLeft: '8px'
        }
      }))), /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
        activePlugins: _editableHtml.ALL_PLUGINS,
        toolbarOpts: {
          position: 'top'
        },
        spellCheck: spellCheckEnabled,
        pluginProps: getPluginProps(template === null || template === void 0 ? void 0 : template.inputConfiguration),
        responseAreaProps: {
          type: 'explicit-constructed-response',
          options: {
            duplicates: true
          },
          maxResponseAreas: maxResponseAreas,
          respAreaToolbar: function respAreaToolbar(node, value, onToolbarDone) {
            var model = _this2.props.model;
            var correctChoice = (model.choices[node.data.get('index')] || [])[0];
            return function () {
              return /*#__PURE__*/_react["default"].createElement(_ecrToolbar["default"], {
                onChangeResponse: function onChangeResponse(newVal) {
                  return _this2.onChangeResponse(node.data.get('index'), newVal);
                },
                node: node,
                value: value,
                onToolbarDone: onToolbarDone,
                correctChoice: correctChoice,
                maxLengthPerChoiceEnabled: maxLengthPerChoiceEnabled
              });
            };
          },
          error: function error() {
            return choicesErrors;
          },
          onHandleAreaChange: this.onHandleAreaChange
        },
        className: classes.markup,
        markup: model.slateMarkup,
        onChange: this.onChange,
        imageSupport: imageSupport,
        disableImageAlignmentButtons: true,
        onBlur: this.onBlur,
        disabled: false,
        highlightShape: false,
        error: responseAreasError,
        uploadSoundSupport: uploadSoundSupport,
        languageCharactersProps: [{
          language: 'spanish'
        }, {
          language: 'special'
        }],
        mathMlOptions: mathMlOptions,
        autoWidthToolbar: true
      }), responseAreasError && /*#__PURE__*/_react["default"].createElement("div", {
        className: classes.errorText
      }, responseAreasError), !(0, _isEmpty["default"])(model.choices) && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
        className: (0, _classnames["default"])(classes.text, classes.responseHeader)
      }, "Define Alternates ".concat(maxLengthPerChoiceEnabled ? 'and Character Limits' : '')), /*#__PURE__*/_react["default"].createElement(_alternateResponses["default"], {
        model: model,
        onChange: this.onResponsesChanged,
        onLengthChange: this.onLengthChanged,
        maxLengthPerChoiceEnabled: maxLengthPerChoiceEnabled,
        spellCheck: spellCheckEnabled,
        choicesErrors: choicesErrors
      }), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
        label: rationale.label,
        className: classes.promptHolder
      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
        className: classes.prompt,
        markup: model.rationale || '',
        onChange: this.onRationaleChanged,
        imageSupport: imageSupport,
        error: rationaleError,
        toolbarOpts: toolbarOpts,
        pluginProps: getPluginProps(rationale === null || rationale === void 0 ? void 0 : rationale.inputConfiguration),
        spellCheck: spellCheckEnabled,
        maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
        maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
        uploadSoundSupport: uploadSoundSupport,
        languageCharactersProps: [{
          language: 'spanish'
        }, {
          language: 'special'
        }],
        mathMlOptions: mathMlOptions,
        autoWidthToolbar: true
      }), rationaleError && /*#__PURE__*/_react["default"].createElement("div", {
        className: classes.errorText
      }, rationaleError)));
    }
  }]);
  return Main;
}(_react["default"].Component);

exports.Main = Main;
(0, _defineProperty2["default"])(Main, "propTypes", {
  configuration: _propTypes["default"].object.isRequired,
  model: _propTypes["default"].object.isRequired,
  disableSidePanel: _propTypes["default"].bool,
  onModelChanged: _propTypes["default"].func.isRequired,
  onConfigurationChanged: _propTypes["default"].func.isRequired,
  classes: _propTypes["default"].object.isRequired,
  imageSupport: _propTypes["default"].shape({
    add: _propTypes["default"].func.isRequired,
    "delete": _propTypes["default"].func.isRequired
  }),
  uploadSoundSupport: _propTypes["default"].object
});
var Styled = (0, _styles.withStyles)(styles)(Main);
var _default = Styled;
exports["default"] = _default;
//# sourceMappingURL=main.js.map