'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactSyntaxHighlighter = require('react-syntax-highlighter');

var _reactSyntaxHighlighter2 = _interopRequireDefault(_reactSyntaxHighlighter);

require('highlight.js/styles/docco.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var onXClick = function onXClick(e, close) {
  e.preventDefault();
  close();
};

var DisplayTest = function DisplayTest(_ref) {
  var getTest = _ref.getTest;
  var shouldShowTest = _ref.shouldShowTest;
  var onKeyPress = _ref.onKeyPress;
  var hideTest = _ref.hideTest;

  if (!shouldShowTest()) {
    return _react2.default.createElement('noscript', null);
  }
  var style = {
    position: 'absolute',
    width: 500,
    height: 600,
    right: 25,
    bottom: 80,
    backgroundColor: 'gainsboro',
    color: 'black',
    boxShadow: '2px 2px 5px #888888',
    overflowY: 'auto'
  };
  var xStyle = {
    float: 'right',
    fontSize: 22,
    fontWeight: 700,
    marginRight: 5,
    cursor: 'pointer'
  };
  return _react2.default.createElement(
    'div',
    { style: style },
    _react2.default.createElement(
      'span',
      { style: xStyle, onClick: function onClick(e) {
          return onXClick(e, hideTest);
        } },
      'X'
    ),
    _react2.default.createElement(
      'div',
      { contentEditable: true, onKeyUp: onKeyPress, style: { outline: 'none' } },
      _react2.default.createElement(
        'pre',
        null,
        _react2.default.createElement(
          'code',
          null,
          _react2.default.createElement(
            _reactSyntaxHighlighter2.default,
            { language: 'javascript' },
            getTest()
          )
        )
      )
    )
  );
};

exports.default = DisplayTest;