"use strict";

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

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

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

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

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

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

var _renderUi = require("../../render-ui");

var _editableHtml = _interopRequireDefault(require("../editable-html"));

var _withMask = require("./with-mask");

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; }

var styles = function styles() {
  return {
    editableHtmlCustom: {
      display: 'inline-block',
      verticalAlign: 'middle',
      margin: '4px',
      borderRadius: '4px',
      border: "1px solid ".concat(_renderUi.color.black())
    },
    correct: {
      border: "1px solid ".concat(_renderUi.color.correct())
    },
    incorrect: {
      border: "1px solid ".concat(_renderUi.color.incorrect())
    }
  };
};

var MaskedInput = function MaskedInput(props) {
  return function (node, data) {
    var _node$data;

    var adjustedLimit = props.adjustedLimit,
        disabled = props.disabled,
        feedback = props.feedback,
        showCorrectAnswer = props.showCorrectAnswer,
        maxLength = props.maxLength,
        spellCheck = props.spellCheck,
        classes = props.classes,
        pluginProps = props.pluginProps,
        onChange = props.onChange;
    var dataset = ((_node$data = node.data) === null || _node$data === void 0 ? void 0 : _node$data.dataset) || {};

    if (dataset.component === 'input') {
      var _pluginProps$characte, _classnames;

      var correctAnswer = (props.choices && dataset && props.choices[dataset.id] || [])[0];
      var finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
      var width = maxLength && maxLength[dataset.id];
      var feedbackStatus = feedback && feedback[dataset.id];
      var isCorrect = showCorrectAnswer || feedbackStatus === 'correct';
      var isIncorrect = !showCorrectAnswer && feedbackStatus === 'incorrect';

      var handleInputChange = function handleInputChange(newValue) {
        var updatedValue = _objectSpread(_objectSpread({}, data), {}, (0, _defineProperty2["default"])({}, dataset.id, newValue));

        onChange(updatedValue);
      };

      var handleKeyDown = function handleKeyDown(event) {
        // the keyCode value for the Enter/Return key is 13
        if (event.key === 'Enter' || event.keyCode === 13) {
          return false;
        }
      };

      return /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
        id: dataset.id,
        key: "".concat(node.type, "-input-").concat(dataset.id),
        disabled: showCorrectAnswer || disabled,
        disableUnderline: true,
        onChange: handleInputChange,
        markup: finalValue || '',
        charactersLimit: adjustedLimit ? width : 25,
        activePlugins: ['languageCharacters'],
        pluginProps: pluginProps,
        languageCharactersProps: [{
          language: 'spanish'
        }],
        spellCheck: spellCheck,
        width: "calc(".concat(width, "em + 42px)") // added 42px for left and right padding of editable-html
        ,
        onKeyDown: handleKeyDown,
        autoWidthToolbar: true,
        toolbarOpts: {
          minWidth: 'auto',
          noBorder: true,
          isHidden: !!(pluginProps !== null && pluginProps !== void 0 && (_pluginProps$characte = pluginProps.characters) !== null && _pluginProps$characte !== void 0 && _pluginProps$characte.disabled)
        },
        className: (0, _classnames2["default"])(classes.editableHtmlCustom, (_classnames = {}, (0, _defineProperty2["default"])(_classnames, classes.correct, isCorrect), (0, _defineProperty2["default"])(_classnames, classes.incorrect, isIncorrect), _classnames))
      });
    }
  };
};

var _default = (0, _styles.withStyles)(styles)((0, _withMask.withMask)('input', MaskedInput));

exports["default"] = _default;
//# sourceMappingURL=constructed-response.js.map