'use strict';

var React = require('react');
var Channel_context = require('../../ChannelProvider-e2f422cf.js');
var ui_MessageInput = require('../../ui/MessageInput.js');
var ui_QuoteMessageInput = require('../../ui/QuoteMessageInput.js');
var LocalizationContext = require('../../LocalizationContext-bc6af64a.js');
var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
var Channel_components_SuggestedMentionList = require('./SuggestedMentionList.js');
var _const = require('../../const-eb6bfc42.js');
var VoiceMessageInputWrapper = require('../../VoiceMessageInputWrapper-2f18145d.js');
var useDirtyGetMentions = require('../../useDirtyGetMentions-b4ae7a63.js');
var MediaQueryContext = require('../../MediaQueryContext-8be571f9.js');
require('../../UserProfileContext-268ad0d1.js');
require('prop-types');
require('../../const-f1c7b0cf.js');
require('../../index-a9099968.js');
require('../../index-c08c7ef8.js');
require('../../topics-623a82c5.js');
require('../../index-609a0bf5.js');
require('../../_rollupPluginBabelHelpers-00480ba8.js');
require('../../utils/message/getOutgoingMessageState.js');
require('../../compareIds-a65972c5.js');
require('@sendbird/chat/groupChannel');
require('../../uuid-43555bb8.js');
require('@sendbird/chat/message');
require('../../consts-d0461d4c.js');
require('../../resolvedReplyType-ab4bb8af.js');
require('../../ui/IconButton.js');
require('../../ui/Button.js');
require('../../index-902525e0.js');
require('../../stringSet-812981b5.js');
require('dompurify');
require('../../consts-c63fe2cd.js');
require('../../ui/Icon.js');
require('../../consts-db7e33d3.js');
require('../../consts-20c3e20f.js');
require('../../tokenize-846b6f86.js');
require('../../index.module-ceb5d636.js');
require('../../ui/ImageRenderer.js');
require('../../withSendbird.js');
require('../../ui/Avatar.js');
require('../../ThreadProvider-8a541e7e.js');
require('../../Thread/context/types.js');
require('@sendbird/chat');
require('../../VoicePlayer/useVoicePlayer.js');
require('../../index-606b67d2.js');
require('../../VoiceRecorder/context.js');
require('../../ui/Modal.js');
require('react-dom');
require('../../index-09573a50.js');
require('../../VoiceRecorder/useVoiceRecorder.js');
require('../../index-faae1326.js');
require('../../ui/PlaybackTime.js');
require('../../ui/ProgressBar.js');
require('../../ui/TextButton.js');
require('../../color-41ee42a1.js');

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

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

const MessageInputWrapper = (props, ref) => {
  const {
    value,
    renderFileUploadIcon,
    renderVoiceMessageIcon,
    renderSendMessageIcon
  } = props;
  const propDisabled = props.disabled;
  const {
    currentGroupChannel,
    initialized,
    quoteMessage,
    sendMessage,
    sendFileMessage,
    sendVoiceMessage,
    setQuoteMessage,
    messageInputRef,
    renderUserMentionItem
  } = Channel_context.useChannelContext();
  const globalStore = useSendbirdStateContext();
  const {
    isMobile
  } = MediaQueryContext.useMediaQueryContext();
  const channel = currentGroupChannel;
  const {
    isOnline,
    isMentionEnabled,
    userMention,
    isVoiceMessageEnabled,
    logger
  } = globalStore.config;
  const maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || 10;
  const maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || 15;
  const {
    stringSet
  } = React.useContext(LocalizationContext.LocalizationContext);
  const [mentionNickname, setMentionNickname] = React.useState('');
  // todo: set type
  const [mentionedUsers, setMentionedUsers] = React.useState([]);
  const [mentionedUserIds, setMentionedUserIds] = React.useState([]);
  const [selectedUser, setSelectedUser] = React.useState(null);
  const [mentionSuggestedUsers, setMentionSuggestedUsers] = React.useState([]);
  const [messageInputEvent, setMessageInputEvent] = React.useState(null);
  const [showVoiceMessageInput, setShowVoiceMessageInput] = React.useState(false);
  const disabled = propDisabled || !initialized || Channel_context.isDisabledBecauseFrozen(channel) || Channel_context.isDisabledBecauseMuted(channel) || !isOnline;
  const isOperator = Channel_context.isOperator(channel);
  const isBroadcast = channel === null || channel === void 0 ? void 0 : channel.isBroadcast;
  const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !Channel_context.isDisabledBecauseFrozen(channel) && !Channel_context.isDisabledBecauseMuted(channel) && !isBroadcast;

  // Reset when channel changes
  React.useEffect(() => {
    setMentionNickname('');
    setMentionedUsers([]);
    setMentionedUserIds([]);
    setSelectedUser(null);
    setMentionSuggestedUsers([]);
    setMessageInputEvent(null);
    setShowVoiceMessageInput(false);
  }, [channel === null || channel === void 0 ? void 0 : channel.url]);
  const mentionNodes = useDirtyGetMentions.useDirtyGetMentions({
    ref: ref || messageInputRef
  }, {
    logger
  });
  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
  React.useEffect(() => {
    setMentionedUsers(mentionedUsers.filter(_ref => {
      let {
        userId
      } = _ref;
      const i = mentionedUserIds.indexOf(userId);
      if (i < 0) {
        return false;
      } else {
        mentionedUserIds.splice(i, 1);
        return true;
      }
    }));
  }, [mentionedUserIds]);

  // broadcast channel + not operator
  if (isBroadcast && !isOperator) {
    return null;
  }
  // other conditions
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: `sendbird-message-input-wrapper${showVoiceMessageInput ? '--voice-message' : ''}`
  }, displaySuggestedMentionList && /*#__PURE__*/React__default["default"].createElement(Channel_components_SuggestedMentionList, {
    targetNickname: mentionNickname,
    inputEvent: messageInputEvent,
    renderUserMentionItem: renderUserMentionItem,
    onUserItemClick: user => {
      if (user) {
        setMentionedUsers([...mentionedUsers, user]);
      }
      setMentionNickname('');
      setSelectedUser(user);
      setMessageInputEvent(null);
    },
    onFocusItemChange: () => {
      setMessageInputEvent(null);
    },
    onFetchUsers: users => {
      setMentionSuggestedUsers(users);
    },
    ableAddMention: ableMention,
    maxMentionCount: maxUserMentionCount,
    maxSuggestionCount: maxUserSuggestionCount
  }), quoteMessage && /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-message-input-wrapper__quote-message-input"
  }, /*#__PURE__*/React__default["default"].createElement(ui_QuoteMessageInput, {
    replyingMessage: quoteMessage,
    onClose: () => setQuoteMessage(null)
  })), showVoiceMessageInput ? /*#__PURE__*/React__default["default"].createElement(VoiceMessageInputWrapper.VoiceMessageInputWrapper, {
    channel: channel,
    onSubmitClick: (recordedFile, duration) => {
      sendVoiceMessage(recordedFile, duration, quoteMessage);
      setQuoteMessage(null);
      setShowVoiceMessageInput(false);
    },
    onCancelClick: () => {
      setShowVoiceMessageInput(false);
    }
  }) : /*#__PURE__*/React__default["default"].createElement(ui_MessageInput, {
    className: "sendbird-message-input-wrapper__message-input",
    value: value,
    channelUrl: channel === null || channel === void 0 ? void 0 : channel.url,
    mentionSelectedUser: selectedUser,
    isMentionEnabled: isMentionEnabled,
    isVoiceMessageEnabled: isVoiceMessageEnabled,
    onVoiceMessageIconClick: () => {
      setShowVoiceMessageInput(true);
    },
    setMentionedUsers: setMentionedUsers,
    channel: channel,
    placeholder: quoteMessage && stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER || Channel_context.isDisabledBecauseFrozen(channel) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED || Channel_context.isDisabledBecauseMuted(channel) && (isMobile ? stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT : stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED),
    ref: ref || messageInputRef,
    disabled: disabled,
    renderFileUploadIcon: renderFileUploadIcon,
    renderSendMessageIcon: renderSendMessageIcon,
    renderVoiceMessageIcon: renderVoiceMessageIcon,
    onStartTyping: () => {
      channel === null || channel === void 0 ? void 0 : channel.startTyping();
    },
    onSendMessage: _ref2 => {
      var _channel$endTyping;
      let {
        message,
        mentionTemplate
      } = _ref2;
      sendMessage({
        message,
        quoteMessage,
        mentionedUsers,
        mentionTemplate
      });
      setMentionNickname('');
      setMentionedUsers([]);
      setQuoteMessage(null);
      channel === null || channel === void 0 ? void 0 : (_channel$endTyping = channel.endTyping) === null || _channel$endTyping === void 0 ? void 0 : _channel$endTyping.call(channel);
    },
    onFileUpload: file => {
      sendFileMessage(file, quoteMessage);
      setQuoteMessage(null);
    },
    onUserMentioned: user => {
      if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
        setSelectedUser(null);
        setMentionNickname('');
      }
    },
    onMentionStringChange: mentionText => {
      setMentionNickname(mentionText);
    },
    onMentionedUserIdsUpdated: userIds => {
      setMentionedUserIds(userIds);
    },
    onKeyDown: e => {
      if (displaySuggestedMentionList && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0 && (e.key === _const.MessageInputKeys.Enter && ableMention || e.key === _const.MessageInputKeys.ArrowUp || e.key === _const.MessageInputKeys.ArrowDown)) {
        setMessageInputEvent(e);
        return true;
      }
      return false;
    }
  }));
};
var MessageInputWrapper$1 = /*#__PURE__*/React__default["default"].forwardRef(MessageInputWrapper);

module.exports = MessageInputWrapper$1;
//# sourceMappingURL=MessageInput.js.map
