"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

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

var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));

var _IconImage = _interopRequireDefault(require("@instructure/ui-icons/lib/Solid/IconImage"));

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

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

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

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

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-common/lib/format-message"));

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

var _theme = _interopRequireDefault(require("./theme"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'dlXUv',
  template: function template(theme) {
    return "\n\n.events__styles__answerMediaIcon {\n  margin-right: ".concat(theme.answerMediaIconMargin || 'inherit', ";\n}\n\n.events__styles__embeddedImage > img {\n  max-height: 400px;\n  max-width: 400px;\n  margin: ").concat(theme.embeddedImageMargin || 'inherit', ";\n  padding-right: ").concat(theme.embeddedImagePadding || 'inherit', ";\n}\n\n.events__styles__mediaToggle {\n  margin: ").concat(theme.mediaToggleMargin || 'inherit', ";\n  text-align: left;\n  border-bottom: 1px solid ").concat(theme.mediaToggleColor || 'inherit', ";\n  border-left: 1px solid ").concat(theme.mediaToggleColor || 'inherit', ";\n  border-right: 1px solid ").concat(theme.mediaToggleColor || 'inherit', ";\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, _lib.default)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(ResponseEvent, _Component);

  function ResponseEvent() {
    (0, _classCallCheck2.default)(this, ResponseEvent);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ResponseEvent).apply(this, arguments));
  }

  (0, _createClass2.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)) {
        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, _extractTextFromHtml.default)(this.itemBody);
      return _react.default.createElement("span", null, this.hasMedia() && _react.default.createElement(_IconImage.default, {
        className: styles.answerMediaIcon
      }), "\u89E3\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 _react.default.createElement("div", {
          className: styles.mediaToggle,
          key: s3Url
        }, _react.default.createElement(_ToggleDetails.default, {
          summary: "\u542B\u307E\u308C\u308B\u30E1\u30C7\u30A3\u30A2",
          variant: "filled"
        }, _react.default.createElement("div", {
          className: styles.embeddedImage
        }, _react.default.createElement(_Img.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 _react.default.createElement(_ToggleDetails.default, {
          summary: this.renderTextSummary()
        }, this.renderMedia(), responseText);
      } else {
        return _react.default.createElement(_Text.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: _reactImmutableProptypes.default.record.isRequired,
  item: _reactImmutableProptypes.default.record.isRequired
}, _temp)) || _class);
exports.default = ResponseEvent;