'use strict';

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

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _dec, _class, _class2, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactImmutableProptypes = require('react-immutable-proptypes');

var _reactImmutableProptypes2 = _interopRequireDefault(_reactImmutableProptypes);

var _IconImageSolid = require('instructure-icons/lib/Solid/IconImageSolid');

var _IconImageSolid2 = _interopRequireDefault(_IconImageSolid);

var _Img = require('@instructure/ui-elements/lib/components/Img');

var _Img2 = _interopRequireDefault(_Img);

var _ToggleDetails = require('@instructure/ui-toggle-details/lib/components/ToggleDetails');

var _ToggleDetails2 = _interopRequireDefault(_ToggleDetails);

var _Text = require('@instructure/ui-elements/lib/components/Text');

var _Text2 = _interopRequireDefault(_Text);

var _lib = require('@instructure/ui-themeable/lib');

var _lib2 = _interopRequireDefault(_lib);

var _formatMessage = require('../../../common/format-message');

var _formatMessage2 = _interopRequireDefault(_formatMessage);

var _extractTextFromHtml = require('quiz-interactions/lib/util/extractTextFromHtml');

var _extractTextFromHtml2 = _interopRequireDefault(_extractTextFromHtml);

var _theme = require('./theme');

var _theme2 = _interopRequireDefault(_theme);

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

var styles = {
  template: function template(theme) {
    return '/*  imported from styles.css  */\n\n.events__styles__answerMediaIcon {\n  margin-right: ' + theme.answerMediaIconMargin + ';\n}\n\n.events__styles__embeddedImage > img {\n  max-height: 400px;\n  max-width: 400px;\n  margin: ' + theme.embeddedImageMargin + ';\n  padding-right: ' + theme.embeddedImagePadding + ';\n}\n\n.events__styles__mediaToggle {\n  margin: ' + theme.mediaToggleMargin + ';\n  text-align: left;\n  border-bottom: 1px solid ' + theme.mediaToggleColor + ';\n  border-left: 1px solid ' + theme.mediaToggleColor + ';\n  border-right: 1px solid ' + theme.mediaToggleColor + ';\n  border-radius: 5px;\n}\n\n[dir="ltr"] .events__styles__mediaToggle {\n  text-align: left;\n}\n\n[dir="rtl"] .events__styles__mediaToggle {\n  text-align: left;\n}\n';
  },
  'answerMediaIcon': 'events__styles__answerMediaIcon',
  'embeddedImage': 'events__styles__embeddedImage',
  'mediaToggle': 'events__styles__mediaToggle'
};
var ResponseEvent = (_dec = (0, _lib2.default)(_theme2.default, styles), _dec(_class = (_temp = _class2 = function (_Component) {
  (0, _inherits3.default)(ResponseEvent, _Component);

  function ResponseEvent() {
    (0, _classCallCheck3.default)(this, ResponseEvent);
    return (0, _possibleConstructorReturn3.default)(this, (ResponseEvent.__proto__ || Object.getPrototypeOf(ResponseEvent)).apply(this, arguments));
  }

  (0, _createClass3.default)(ResponseEvent, [{
    key: 'getReadableResponseText',
    value: function getReadableResponseText() {
      var responseValue = this.props.event.getIn(['eventData', 'userResponse', 'value']);
      if (responseValue != null && !['string', 'boolean', 'number'].includes(typeof responseValue === 'undefined' ? 'undefined' : (0, _typeof3.default)(responseValue))) {
        responseValue = responseValue.toJS();
      }
      if (responseValue != null) {
        return this.props.item.getInteractionType().getRenderedResponse(responseValue, this.props.item.get('interactionData').toJS());
      }
    }
  }, {
    key: 'hasMedia',
    value: function hasMedia() {
      return this.itemBody.includes('<img');
    }
  }, {
    key: 'renderTextSummary',
    value: function renderTextSummary() {
      var strippedItemBody = (0, _extractTextFromHtml2.default)(this.itemBody);
      return _react2.default.createElement(
        'span',
        null,
        this.hasMedia() && _react2.default.createElement(_IconImageSolid2.default, { className: styles.answerMediaIcon }),
        '\u5DF2\u56DE\u7B54\uFF1A' + strippedItemBody
      );
    }
  }, {
    key: 'renderMedia',
    value: function renderMedia() {
      if (!this.hasMedia()) {
        return;
      }
      var imgRegex = /<img.*?src=['"](.*?)['"]/g;
      var mediaUrls = this.itemBody.match(imgRegex);
      return mediaUrls.map(function (mediaUrl) {
        var s3Url = mediaUrl.match(/src=['"](.*?)['"]/)[1];
        return _react2.default.createElement(
          'div',
          { className: styles.mediaToggle, key: s3Url },
          _react2.default.createElement(
            _ToggleDetails2.default,
            {
              summary: '\u5A92\u4F53\u5DF2\u5305\u62EC',
              variant: 'filled'
            },
            _react2.default.createElement(
              'div',
              { className: styles.embeddedImage },
              _react2.default.createElement(_Img2.default, { src: s3Url })
            )
          )
        );
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var responseText = this.getReadableResponseText();
      if (responseText) {
        // If this returns falsey, then we know to just display the stem
        return _react2.default.createElement(
          _ToggleDetails2.default,
          { summary: this.renderTextSummary() },
          this.renderMedia(),
          responseText
        );
      } else {
        return _react2.default.createElement(
          _Text2.default,
          { size: 'small' },
          this.renderTextSummary(),
          this.renderMedia()
        );
      }
    }
  }, {
    key: 'itemBody',
    get: function get() {
      return this.props.item.get('itemBody');
    }
  }]);
  ResponseEvent.displayName = 'ResponseEvent'
  ;
  return ResponseEvent;
}(_react.Component), _class2.propTypes = {
  event: _reactImmutableProptypes2.default.record.isRequired,
  item: _reactImmutableProptypes2.default.record.isRequired
}, _temp)) || _class);
exports.default = ResponseEvent;