"use strict";

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

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

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

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

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

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

var _OutlinedInput = _interopRequireDefault(require("@material-ui/core/OutlinedInput"));

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

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

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

var _excluded = ["correct", "charactersLimit", "classes", "disabled", "isBox", "isConstructedResponse", "width", "spellCheck"];

var correctStyle = function correctStyle(color) {
  return {
    borderColor: "".concat(color, " !important")
  };
};

var _default = (0, _styles.withStyles)(function () {
  return {
    input: {
      color: _renderUi.color.text(),
      backgroundColor: _renderUi.color.background(),
      borderRadius: '4px !important',
      borderWidth: '1px',
      borderStyle: 'solid',
      padding: '10px 20px 10px 10px',
      '&:disabled': {
        opacity: 0.8,
        cursor: 'not-allowed !important'
      },
      '&:hover': {
        borderColor: _renderUi.color.primary(),
        '&:disabled': {
          borderColor: 'initial'
        }
      },
      '&:focus': {
        borderColor: _renderUi.color.primaryDark()
      }
    },
    crInput: {
      padding: '8px !important'
    },
    correct: correctStyle(_renderUi.color.correct()),
    incorrect: correctStyle(_renderUi.color.incorrect()),
    box: {
      fontSize: 'inherit'
    },
    outlinedInput: {
      padding: '2px',
      borderRadius: '4px',
      '& fieldset': {
        border: 0
      }
    },
    notchedOutline: {
      borderColor: _renderUi.color.correct()
    }
  };
})(function (props) {
  var _classnames, _classnames2;

  var correct = props.correct,
      charactersLimit = props.charactersLimit,
      classes = props.classes,
      disabled = props.disabled,
      isBox = props.isBox,
      isConstructedResponse = props.isConstructedResponse,
      width = props.width,
      spellCheck = props.spellCheck,
      rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var label = typeof correct === 'boolean' ? correct ? 'correct' : 'incorrect' : undefined;
  var inputProps = charactersLimit ? {
    maxLength: charactersLimit
  } : {};

  if (width) {
    inputProps.style = {
      width: "".concat(width + Math.round(width / 10) + 1, "ch") // added some extra space for capital letters

    };
  }

  return /*#__PURE__*/_react["default"].createElement(_OutlinedInput["default"], (0, _extends2["default"])({
    className: (0, _classnames3["default"])((_classnames = {}, (0, _defineProperty2["default"])(_classnames, classes.disabledInput, disabled), (0, _defineProperty2["default"])(_classnames, classes.box, isBox), (0, _defineProperty2["default"])(_classnames, classes.outlinedInput, true), _classnames)),
    classes: {
      input: (0, _classnames3["default"])((_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, classes.input, true), (0, _defineProperty2["default"])(_classnames2, classes[label], label), (0, _defineProperty2["default"])(_classnames2, classes.crInput, isConstructedResponse), _classnames2))
    },
    inputProps: inputProps,
    labelWidth: 0,
    disabled: disabled,
    spellCheck: spellCheck
  }, rest));
});

exports["default"] = _default;
//# sourceMappingURL=correct-input.js.map