import React__default, { useContext } from 'react';
import { k as isFileMessage, d as isVoiceMessage, l as isImageMessage, m as isThumbnailMessage, n as isAudioMessage, h as getClassName, o as isGifMessage, p as isVideoMessage, q as isUserMessage, r as getUIKitMessageType, U as UIKitMessageTypes } from '../index-eefb44ba.js';
import Icon, { IconTypes, IconColors } from './Icon.js';
import { L as Label, a as LabelTypography, b as LabelColors } from '../index-4372fcec.js';
import { a as LocalizationContext } from '../LocalizationContext-b2390bf8.js';
import ImageRenderer from './ImageRenderer.js';
import '../_rollupPluginBabelHelpers-4f8ebde4.js';
import '../utils/message/getOutgoingMessageState.js';
import 'prop-types';
import '../stringSet-eefbc798.js';
import '../index-67135027.js';

const componentClassname = 'sendbird-quote_message_input__avatar';
function QuoteMessageThumbnail(_ref) {
  let {
    message
  } = _ref;
  if (!isFileMessage(message) || isVoiceMessage(message)) {
    return null;
  }
  const thumbnailUrl = message.thumbnails && message.thumbnails.length > 0 && message.thumbnails[0].url || isImageMessage(message) && message.url;
  if (isThumbnailMessage(message) && thumbnailUrl) {
    return /*#__PURE__*/React__default.createElement(ImageRenderer, {
      className: componentClassname,
      url: thumbnailUrl,
      alt: message.type,
      width: "44px",
      height: "44px",
      fixedSize: true
    });
  } else if (isAudioMessage(message)) {
    return /*#__PURE__*/React__default.createElement("div", {
      className: componentClassname
    }, /*#__PURE__*/React__default.createElement(Icon, {
      type: IconTypes.FILE_AUDIO,
      fillColor: IconColors.ON_BACKGROUND_2,
      width: "24px",
      height: "24px"
    }));
  } else {
    return /*#__PURE__*/React__default.createElement("div", {
      className: componentClassname
    }, /*#__PURE__*/React__default.createElement(Icon, {
      type: IconTypes.FILE_DOCUMENT,
      fillColor: IconColors.ON_BACKGROUND_2,
      width: "24px",
      height: "24px"
    }));
  }
}

function QuoteMessageInput(_ref) {
  let {
    className,
    replyingMessage,
    onClose
  } = _ref;
  const {
    stringSet
  } = useContext(LocalizationContext);
  const fileMessage = replyingMessage;
  const sender = replyingMessage === null || replyingMessage === void 0 ? void 0 : replyingMessage.sender;
  const displayFileIcon = isFileMessage(replyingMessage) && !isVoiceMessage(replyingMessage);
  return /*#__PURE__*/React__default.createElement("div", {
    className: getClassName(['sendbird-quote_message_input', className])
  }, displayFileIcon && /*#__PURE__*/React__default.createElement(QuoteMessageThumbnail, {
    message: fileMessage
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-quote_message_input__body",
    style: {
      width: `calc(100% - ${displayFileIcon ? '164px' : '120px'})`,
      left: displayFileIcon ? '92px' : '40px'
    }
  }, /*#__PURE__*/React__default.createElement(Label, {
    className: "sendbird-quote_message_input__body__sender-name",
    type: LabelTypography.CAPTION_1,
    color: LabelColors.ONBACKGROUND_1
  }, `${stringSet.QUOTE_MESSAGE_INPUT__REPLY_TO} ${sender && sender.nickname ? sender.nickname : stringSet.NO_NAME}`), /*#__PURE__*/React__default.createElement(Label, {
    className: "sendbird-quote_message_input__body__message-content",
    type: LabelTypography.BODY_2,
    color: LabelColors.ONBACKGROUND_3
  }, isImageMessage(fileMessage) && !isGifMessage(fileMessage) && stringSet.QUOTE_MESSAGE_INPUT__FILE_TYPE_IMAGE, isVideoMessage(fileMessage) && stringSet.QUOTE_MESSAGE_INPUT__FILE_TYPE__VIDEO, isGifMessage(fileMessage) && stringSet.QUOTE_MESSAGE_INPUT__FILE_TYPE_GIF, isUserMessage(replyingMessage) && replyingMessage.message, getUIKitMessageType(replyingMessage) === UIKitMessageTypes.FILE && fileMessage.name, isVoiceMessage(replyingMessage) && stringSet.VOICE_MESSAGE)), /*#__PURE__*/React__default.createElement(Icon, {
    className: "sendbird-quote_message_input__close-button",
    type: IconTypes.CLOSE,
    fillColor: IconColors.ON_BACKGROUND_2,
    width: "24px",
    height: "24px",
    onClick: () => onClose(replyingMessage)
  }));
}

export { QuoteMessageInput as default };
//# sourceMappingURL=QuoteMessageInput.js.map
