'use strict';

var tslib_es6 = require('../../tslib.es6-5163dacf.js');
var React = require('react');
var groupChannel = require('@sendbird/chat/groupChannel');
var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
var ui_MessageInput = require('../../ui/MessageInput.js');
var _const = require('../../const-6d262369.js');
var Channel_components_SuggestedMentionList = require('../../Channel/components/SuggestedMentionList.js');
var Thread_context = require('../../ThreadProvider-2dc43e25.js');
var LocalizationContext = require('../../LocalizationContext-53fd4ae9.js');
var VoiceMessageInputWrapper = require('../../VoiceMessageInputWrapper-965de260.js');
var types = require('../../types-c8782eaf.js');
require('../../withSendbird.js');
require('../../_rollupPluginBabelHelpers-3c8c757e.js');
require('react-dom/server');
require('prop-types');
require('../../const-5e034408.js');
require('../../ui/IconButton.js');
require('../../ui/Button.js');
require('../../index-db48f031.js');
require('../../stringSet-42fa6280.js');
require('../../ui/MentionUserLabel.js');
require('../../ui/Icon.js');
require('../../index-482bbe89.js');
require('../../utils/message/getOutgoingMessageState.js');
require('../../index-7c018421.js');
require('../../ui/Avatar.js');
require('../../ui/ImageRenderer.js');
require('../../uuid-e879709a.js');
require('../../ChannelProvider-498847bc.js');
require('../../UserProfileContext-c7d6be85.js');
require('../../index-a283267f.js');
require('../../topics-bc8e923e.js');
require('../../compareIds-d78964c7.js');
require('@sendbird/chat/message');
require('../../ui/ContextMenu.js');
require('react-dom');
require('../../ui/SortByRow.js');
require('../../ui/ReactionButton.js');
require('../../consts-b08b4ca6.js');
require('../context/types.js');
require('@sendbird/chat');
require('../../VoicePlayer/useVoicePlayer.js');
require('../../index-178229c9.js');
require('../../VoiceRecorder/context.js');
require('../../lame.all.js');
require('../../VoiceRecorder/useVoiceRecorder.js');
require('../../index-e42edbd5.js');
require('../../ui/PlaybackTime.js');
require('../../ui/ProgressBar.js');
require('../../ui/TextButton.js');
require('../../color-578986d2.js');
require('../../ui/Modal.js');
require('../../index-e49314a5.js');
require('../../MediaQueryContext-cfb37524.js');

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

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

var ThreadMessageInput = function (props, ref) {
  var className = props.className,
      renderFileUploadIcon = props.renderFileUploadIcon,
      renderVoiceMessageIcon = props.renderVoiceMessageIcon,
      renderSendMessageIcon = props.renderSendMessageIcon;
  var config = useSendbirdStateContext().config;
  var stringSet = LocalizationContext.useLocalization().stringSet;
  var isMentionEnabled = config.isMentionEnabled,
      isOnline = config.isOnline,
      userMention = config.userMention,
      isVoiceMessageEnabled = config.isVoiceMessageEnabled;

  var _a = Thread_context.useThreadContext(),
      currentChannel = _a.currentChannel,
      parentMessage = _a.parentMessage,
      sendMessage = _a.sendMessage,
      sendFileMessage = _a.sendFileMessage,
      sendVoiceMessage = _a.sendVoiceMessage,
      isMuted = _a.isMuted,
      isChannelFrozen = _a.isChannelFrozen,
      allThreadMessages = _a.allThreadMessages;

  var messageInputRef = React.useRef();
  var disabled = isMuted || !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === types.Role.OPERATOR) && isChannelFrozen || parentMessage === null; // mention

  var _b = React.useState(''),
      mentionNickname = _b[0],
      setMentionNickname = _b[1];

  var _c = React.useState([]),
      mentionedUsers = _c[0],
      setMentionedUsers = _c[1];

  var _d = React.useState([]),
      mentionedUserIds = _d[0],
      setMentionedUserIds = _d[1];

  var _e = React.useState(null),
      selectedUser = _e[0],
      setSelectedUser = _e[1];

  var _f = React.useState([]),
      mentionSuggestedUsers = _f[0],
      setMentionSuggestedUsers = _f[1];

  var _g = React.useState(true),
      ableMention = _g[0],
      setAbleMention = _g[1];

  var _h = React.useState(null),
      messageInputEvent = _h[0],
      setMessageInputEvent = _h[1];

  var _j = React.useState(false),
      showVoiceMessageInput = _j[0],
      setShowVoiceMessageInput = _j[1];

  var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0; // && !utils.isDisabledBecauseFrozen(channel)
  // && !utils.isDisabledBecauseMuted(channel);
  // Reset when changing channel

  React.useEffect(function () {
    setShowVoiceMessageInput(false);
  }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
  React.useEffect(function () {
    if ((mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) >= (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount)) {
      setAbleMention(false);
    } else {
      setAbleMention(true);
    }
  }, [mentionedUsers]);
  React.useEffect(function () {
    setMentionedUsers(mentionedUsers.filter(function (_a) {
      var userId = _a.userId;
      var i = mentionedUserIds.indexOf(userId);

      if (i < 0) {
        return false;
      } else {
        mentionedUserIds.splice(i, 1);
        return true;
      }
    }));
  }, [mentionedUserIds]);

  if ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isBroadcast) && (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) !== types.Role.OPERATOR) {
    return null;
  }

  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-thread-message-input".concat(showVoiceMessageInput ? '--voice-message' : '', " ").concat(className)
  }, displaySuggestedMentionList && /*#__PURE__*/React__default["default"].createElement(Channel_components_SuggestedMentionList, {
    targetNickname: mentionNickname,
    inputEvent: messageInputEvent // renderUserMentionItem={renderUserMentionItem}
    ,
    onUserItemClick: function (user) {
      if (user) {
        setMentionedUsers(tslib_es6.__spreadArray(tslib_es6.__spreadArray([], mentionedUsers, true), [user], false));
      }

      setMentionNickname('');
      setSelectedUser(user);
      setMessageInputEvent(null);
    },
    onFocusItemChange: function () {
      setMessageInputEvent(null);
    },
    onFetchUsers: function (users) {
      setMentionSuggestedUsers(users);
    },
    ableAddMention: ableMention,
    maxMentionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount,
    maxSuggestionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount
  }), showVoiceMessageInput ? /*#__PURE__*/React__default["default"].createElement(VoiceMessageInputWrapper.VoiceMessageInputWrapper, {
    channel: currentChannel,
    onSubmitClick: function (recordedFile, duration) {
      sendVoiceMessage(recordedFile, duration, parentMessage);
      setShowVoiceMessageInput(false);
    },
    onCancelClick: function () {
      setShowVoiceMessageInput(false);
    }
  }) : /*#__PURE__*/React__default["default"].createElement(ui_MessageInput, {
    className: "sendbird-thread-message-input__message-input",
    messageFieldId: "sendbird-message-input-text-field--thread",
    disabled: disabled,
    channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
    mentionSelectedUser: selectedUser,
    isMentionEnabled: isMentionEnabled,
    isVoiceMessageEnabled: isVoiceMessageEnabled,
    onVoiceMessageIconClick: function () {
      setShowVoiceMessageInput(true);
    },
    renderFileUploadIcon: renderFileUploadIcon,
    renderVoiceMessageIcon: renderVoiceMessageIcon,
    renderSendMessageIcon: renderSendMessageIcon,
    ref: ref || messageInputRef,
    placeholder: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isFrozen) && !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === types.Role.OPERATOR) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED || (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myMutedState) === groupChannel.MutedState.MUTED && stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT || (allThreadMessages.length > 0 ? stringSet.THREAD__INPUT__REPLY_TO_THREAD : stringSet.THREAD__INPUT__REPLY_IN_THREAD),
    onStartTyping: function () {
      var _a;

      (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.startTyping) === null || _a === void 0 ? void 0 : _a.call(currentChannel);
    },
    onSendMessage: function (_a) {
      var _b;

      var message = _a.message,
          mentionTemplate = _a.mentionTemplate;
      sendMessage({
        message: message,
        mentionedUsers: mentionedUsers,
        mentionTemplate: mentionTemplate,
        quoteMessage: parentMessage
      });
      setMentionNickname('');
      setMentionedUsers([]);
      (_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentChannel);
    },
    onFileUpload: function (file) {
      sendFileMessage(file, parentMessage);
    },
    onUserMentioned: function (user) {
      if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
        setSelectedUser(null);
        setMentionNickname('');
      }
    },
    onMentionStringChange: function (mentionText) {
      setMentionNickname(mentionText);
    },
    onMentionedUserIdsUpdated: function (userIds) {
      setMentionedUserIds(userIds);
    },
    onKeyDown: function (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 ThreadMessageInput$1 = /*#__PURE__*/React__default["default"].forwardRef(ThreadMessageInput);

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