'use strict';

var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-acf412a3.js');
var React = require('react');
var ui_Icon = require('./Icon.js');
var ui_ImageRenderer = require('./ImageRenderer.js');
var index = require('../index-a91b85d9.js');
var utils = require('../utils-5aa0708e.js');
var useLongPress = require('../useLongPress-cf56e64a.js');
require('prop-types');
require('../utils/message/getOutgoingMessageState.js');
require('../MediaQueryContext-fad211ad.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function ThumbnailMessageItemBody(_ref) {
  var _thumbnails$, _message$reactions$le, _message$reactions;
  let {
    className = '',
    message,
    isByMe = false,
    mouseHover = false,
    isReactionEnabled = false,
    showFileViewer = utils.noop,
    style = {}
  } = _ref;
  const {
    thumbnails = []
  } = message;
  const thumbnailUrl = thumbnails.length > 0 ? (_thumbnails$ = thumbnails[0]) === null || _thumbnails$ === void 0 ? void 0 : _thumbnails$.url : '';
  const [imageRendered, setImageRendered] = React.useState(false);
  const onClickHandler = useLongPress.useLongPress({
    onLongPress: utils.noop,
    onClick: () => {
      if (index.isSentMessage(message)) {
        showFileViewer === null || showFileViewer === void 0 ? void 0 : showFileViewer(true);
      }
    }
  });
  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
    className: index.getClassName([className, 'sendbird-thumbnail-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_message$reactions$le = (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) !== null && _message$reactions$le !== void 0 ? _message$reactions$le : 0) > 0 ? 'reactions' : ''])
  }, onClickHandler), /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
    className: "sendbird-thumbnail-message-item-body__thumbnail",
    url: thumbnailUrl || (message === null || message === void 0 ? void 0 : message.url),
    alt: message === null || message === void 0 ? void 0 : message.type,
    width: (style === null || style === void 0 ? void 0 : style.width) || '360px',
    height: (style === null || style === void 0 ? void 0 : style.height) || '270px',
    onLoad: () => {
      setImageRendered(true);
    },
    placeHolder: style_ => /*#__PURE__*/React__default["default"].createElement("div", {
      className: "sendbird-thumbnail-message-item-body__placeholder",
      style: style_
    })
  }), index.isVideoMessage(message) && !thumbnailUrl && !imageRendered && /*#__PURE__*/React__default["default"].createElement("video", {
    className: "sendbird-thumbnail-message-item-body__video"
  }, /*#__PURE__*/React__default["default"].createElement("source", {
    src: message === null || message === void 0 ? void 0 : message.url,
    type: message === null || message === void 0 ? void 0 : message.type
  })), /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-thumbnail-message-item-body__image-cover"
  }), (index.isVideoMessage(message) || index.isGifMessage(message)) && /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-thumbnail-message-item-body__icon-wrapper"
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-thumbnail-message-item-body__icon-wrapper__icon"
  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    type: index.isVideoMessage(message) ? ui_Icon.IconTypes.PLAY : ui_Icon.IconTypes.GIF,
    fillColor: ui_Icon.IconColors.GRAY,
    width: "34px",
    height: "34px"
  }))));
}

module.exports = ThumbnailMessageItemBody;
//# sourceMappingURL=ThumbnailMessageItemBody.js.map
