import React__default, { useRef, useState, useEffect } from 'react';
import { MutedState } from '@sendbird/chat/groupChannel';
import useSendbirdStateContext from '../../useSendbirdStateContext.js';
import MessageInput from '../../ui/MessageInput.js';
import { M as MessageInputKeys } from '../../const-c64639fc.js';
import SuggestedMentionList from '../../Channel/components/SuggestedMentionList.js';
import { u as useThreadContext } from '../../ThreadProvider-7a96557d.js';
import { u as useLocalization } from '../../LocalizationContext-bcaf447a.js';
import { V as VoiceMessageInputWrapper } from '../../VoiceMessageInputWrapper-876192a9.js';
import { R as Role } from '../../types-061bedf1.js';
import { u as useDirtyGetMentions } from '../../useDirtyGetMentions-8a3ab1ab.js';
import { a as isDisabledBecauseFrozen, b as isDisabledBecauseMuted } from '../../ChannelProvider-205bb2b4.js';
import '../../withSendbird.js';
import '../../_rollupPluginBabelHelpers-52628376.js';
import 'prop-types';
import '../../const-4bc8cbc7.js';
import '../../ui/IconButton.js';
import '../../ui/Button.js';
import '../../index-208f60f9.js';
import '../../stringSet-7f300d56.js';
import 'dompurify';
import '../../consts-acdc6c08.js';
import '../../ui/Icon.js';
import '../../index-46da725e.js';
import '../../utils/message/getOutgoingMessageState.js';
import '../../consts-c99872c0.js';
import '../../consts-cf7328d6.js';
import '../../tokenize-aa91b5a4.js';
import '../../index.module-6fe8c3f8.js';
import '../../index-26c66412.js';
import '../../ui/Avatar.js';
import '../../ui/ImageRenderer.js';
import '../../uuid-9e3aeec6.js';
import '../../UserProfileContext-96f68187.js';
import '../../index-0e63045e.js';
import '../../topics-50ed8c29.js';
import '../../compareIds-c483b4db.js';
import '@sendbird/chat/message';
import '../../consts-37c3d0a0.js';
import '../../resolvedReplyType-bfdfe6bd.js';
import '../context/types.js';
import '@sendbird/chat';
import '../../VoicePlayer/useVoicePlayer.js';
import '../../index-dea18b86.js';
import '../../VoiceRecorder/context.js';
import '../../ui/Modal.js';
import 'react-dom';
import '../../index-5ca598bf.js';
import '../../MediaQueryContext-0d6b7936.js';
import '../../VoiceRecorder/useVoiceRecorder.js';
import '../../index-7d0ca6f2.js';
import '../../ui/PlaybackTime.js';
import '../../ui/ProgressBar.js';
import '../../ui/TextButton.js';
import '../../color-5dee2e2d.js';

const ThreadMessageInput = (props, ref) => {
  const {
    className,
    renderFileUploadIcon,
    renderVoiceMessageIcon,
    renderSendMessageIcon
  } = props;
  const propsDisabled = props.disabled;
  const {
    config
  } = useSendbirdStateContext();
  const {
    stringSet
  } = useLocalization();
  const {
    isMentionEnabled,
    isOnline,
    userMention,
    isVoiceMessageEnabled,
    logger
  } = config;
  const {
    currentChannel,
    parentMessage,
    sendMessage,
    sendFileMessage,
    sendVoiceMessage,
    isMuted,
    isChannelFrozen,
    allThreadMessages
  } = useThreadContext();
  const messageInputRef = useRef();
  const disabled = propsDisabled || isMuted || !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === Role.OPERATOR) && isChannelFrozen || parentMessage === null;

  // mention
  const [mentionNickname, setMentionNickname] = useState('');
  const [mentionedUsers, setMentionedUsers] = useState([]);
  const [mentionedUserIds, setMentionedUserIds] = useState([]);
  const [selectedUser, setSelectedUser] = useState(null);
  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
  const [messageInputEvent, setMessageInputEvent] = useState(null);
  const [showVoiceMessageInput, setShowVoiceMessageInput] = useState(false);
  const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isDisabledBecauseFrozen(currentChannel) && !isDisabledBecauseMuted(currentChannel) && !(currentChannel !== null && currentChannel !== void 0 && currentChannel.isBroadcast);

  // Reset when changing channel
  useEffect(() => {
    setShowVoiceMessageInput(false);
  }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
  const mentionNodes = useDirtyGetMentions({
    ref: ref || messageInputRef
  }, {
    logger
  });
  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount);
  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]);
  if (currentChannel !== null && currentChannel !== void 0 && currentChannel.isBroadcast && (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) !== Role.OPERATOR) {
    return null;
  }
  return /*#__PURE__*/React__default.createElement("div", {
    className: `sendbird-thread-message-input${showVoiceMessageInput ? '--voice-message' : ''} ${className}`
  }, displaySuggestedMentionList && /*#__PURE__*/React__default.createElement(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: userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount,
    maxSuggestionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount
  }), showVoiceMessageInput ? /*#__PURE__*/React__default.createElement(VoiceMessageInputWrapper, {
    channel: currentChannel,
    onSubmitClick: (recordedFile, duration) => {
      sendVoiceMessage(recordedFile, duration, parentMessage);
      setShowVoiceMessageInput(false);
    },
    onCancelClick: () => {
      setShowVoiceMessageInput(false);
    }
  }) : /*#__PURE__*/React__default.createElement(MessageInput, {
    className: "sendbird-thread-message-input__message-input",
    messageFieldId: "sendbird-message-input-text-field--thread",
    disabled: disabled,
    channel: currentChannel,
    setMentionedUsers: setMentionedUsers,
    channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
    mentionSelectedUser: selectedUser,
    isMentionEnabled: isMentionEnabled,
    isVoiceMessageEnabled: isVoiceMessageEnabled,
    onVoiceMessageIconClick: () => {
      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) === Role.OPERATOR) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED || (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myMutedState) === 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: () => {
      var _currentChannel$start;
      currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$start = currentChannel.startTyping) === null || _currentChannel$start === void 0 ? void 0 : _currentChannel$start.call(currentChannel);
    },
    onSendMessage: _ref2 => {
      var _currentChannel$endTy;
      let {
        message,
        mentionTemplate
      } = _ref2;
      sendMessage({
        message: message,
        mentionedUsers,
        mentionTemplate: mentionTemplate,
        quoteMessage: parentMessage
      });
      setMentionNickname('');
      setMentionedUsers([]);
      currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$endTy = currentChannel.endTyping) === null || _currentChannel$endTy === void 0 ? void 0 : _currentChannel$endTy.call(currentChannel);
    },
    onFileUpload: file => {
      sendFileMessage(file, parentMessage);
    },
    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 === MessageInputKeys.Enter && ableMention || e.key === MessageInputKeys.ArrowUp || e.key === MessageInputKeys.ArrowDown)) {
        setMessageInputEvent(e);
        return true;
      }
      return false;
    }
  }));
};
var ThreadMessageInput$1 = /*#__PURE__*/React__default.forwardRef(ThreadMessageInput);

export { ThreadMessageInput$1 as default };
//# sourceMappingURL=ThreadMessageInput.js.map
