"use strict";

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

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

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

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

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _ = require("../..");

// 3rd-Party Libraries
// Permissions
// Readme Libs
var syntaxHighlighter = typeof window !== 'undefined' ? require('@readme/syntax-highlighter/dist/index.js')["default"] : function () {};

function TutorialResponse(_ref) {
  var response = _ref.response,
      updateTutorial = _ref.updateTutorial;

  var handleChange = function handleChange(value, _ref2, readOnly) {
    var origin = _ref2.origin;

    if (['+input', 'paste', '+delete'].includes(origin) && !readOnly) {
      updateTutorial({
        response: value
      });
    }
  };

  var _onChange = process.env.NODE_ENV === 'test' ? handleChange : (0, _debounce["default"])(handleChange, 300);

  var codeMirrorOpts = function codeMirrorOpts(readOnly) {
    return readOnly ? {
      highlightMode: true,
      tokenizeVariables: true
    } : {
      editable: true
    };
  };

  return /*#__PURE__*/_react["default"].createElement(_.PermissionContext.Consumer, null, function (readOnly) {
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, syntaxHighlighter(response, 'json', codeMirrorOpts(readOnly), {
      onChange: function onChange(editor, data, value) {
        return _onChange(value, data, readOnly);
      }
    }));
  });
}

TutorialResponse.propTypes = {
  response: _propTypes["default"].string,
  updateTutorial: _propTypes["default"].func
};
TutorialResponse.defaultProps = {
  response: ''
};