"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 () {}; // Style

var classes = {};
/* istanbul ignore next */

if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = {
  "slate": "#384248",
  "blue": "#118CFD",
  "green": "#12CA93",
  "red": "#E95F6A",
  "yellow": "#F7C543",
  "purple": "#8470BE",
  "graphite": "#4F5A66",
  "shale": "#939EAE",
  "chalk": "#c6cbd3",
  "ivory": "#F0F0F0",
  "lightGray": "#F8F8F8",
  "white": "#FFF",
  "TutorialResponse-Tooltip": "_3xk-I-TutorialResponse-Tooltip"
};

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 ? {
      dark: true,
      highlightMode: true,
      tokenizeVariables: true
    } : {
      dark: true,
      editable: true
    };
  };

  return /*#__PURE__*/_react["default"].createElement(_.PermissionContext.Consumer, null, function (readOnly) {
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !readOnly && /*#__PURE__*/_react["default"].createElement("i", {
      className: "".concat(classes['TutorialResponse-Tooltip'], " fa fa-question-circle"),
      "data-tooltip": "Leave the response section empty to hide it from your users",
      "data-tooltip-position": "left"
    }), 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: ''
};