import React__default, { useContext, useState, useEffect } from 'react';
import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
import { a as LocalizationContext } from '../../LocalizationContext-9c54e783.js';
import { u as uuidv4 } from '../../uuid-48baadaf.js';
import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-4111594a.js';
import { u as useChannelContext } from '../../ChannelProvider-4ab3a851.js';
import useSendbirdStateContext from '../../useSendbirdStateContext.js';
import '../../stringSet-1f18348a.js';
import '../../index-a9ddd0f5.js';
import 'prop-types';
import '../../UserProfileContext-a8aa4c0f.js';
import '../../index-f48cfdf7.js';
import '../../topics-d8d10f83.js';
import '../../index-dbe0e004.js';
import '../../_rollupPluginBabelHelpers-b2d9bfc5.js';
import '../../utils/message/getOutgoingMessageState.js';
import '../../compareIds-1e0e668f.js';
import '../../const-5f722b91.js';
import '@sendbird/chat/message';
import '../../ui/ContextMenu.js';
import 'react-dom';
import '../../ui/SortByRow.js';
import '../../ui/ReactionButton.js';
import '../../ui/ImageRenderer.js';
import '../../ui/Icon.js';
import '../../consts-c9746f2b.js';
import '../../withSendbird.js';

const TypingIndicatorText = _ref => {
  let {
    members
  } = _ref;
  const {
    stringSet
  } = useContext(LocalizationContext);
  if (!members || members.length === 0) {
    return '';
  }
  if (members && members.length === 1) {
    return `${members[0].nickname} ${stringSet.TYPING_INDICATOR__IS_TYPING}`;
  }
  if (members && members.length === 2) {
    return `${members[0].nickname} ${stringSet.TYPING_INDICATOR__AND} ${members[1].nickname} ${stringSet.TYPING_INDICATOR__ARE_TYPING}`;
  }
  return stringSet.TYPING_INDICATOR__MULTIPLE_TYPING;
};
const TypingIndicator = () => {
  var _globalStore$stores, _globalStore$stores$s, _globalStore$config;
  const {
    channelUrl
  } = useChannelContext();
  const globalStore = useSendbirdStateContext();
  const sb = globalStore === null || globalStore === void 0 ? void 0 : (_globalStore$stores = globalStore.stores) === null || _globalStore$stores === void 0 ? void 0 : (_globalStore$stores$s = _globalStore$stores.sdkStore) === null || _globalStore$stores$s === void 0 ? void 0 : _globalStore$stores$s.sdk;
  const logger = globalStore === null || globalStore === void 0 ? void 0 : (_globalStore$config = globalStore.config) === null || _globalStore$config === void 0 ? void 0 : _globalStore$config.logger;
  const [handlerId, setHandlerId] = useState(uuidv4());
  const [typingMembers, setTypingMembers] = useState([]);
  useEffect(() => {
    var _sb$groupChannel;
    if (sb !== null && sb !== void 0 && (_sb$groupChannel = sb.groupChannel) !== null && _sb$groupChannel !== void 0 && _sb$groupChannel.addGroupChannelHandler) {
      sb.groupChannel.removeGroupChannelHandler(handlerId);
      const newHandlerId = uuidv4();
      const handler = new GroupChannelHandler({
        onTypingStatusUpdated: groupChannel => {
          // there is a possible warning in here - setState called after unmount
          logger.info('Channel > Typing Indicator: onTypingStatusUpdated', groupChannel);
          if (groupChannel.url === channelUrl) {
            const members = groupChannel.getTypingUsers();
            setTypingMembers(members);
          }
        }
      });
      sb.groupChannel.addGroupChannelHandler(newHandlerId, handler);
      setHandlerId(newHandlerId);
    }
    return () => {
      var _sb$groupChannel2;
      setTypingMembers([]);
      if (sb !== null && sb !== void 0 && (_sb$groupChannel2 = sb.groupChannel) !== null && _sb$groupChannel2 !== void 0 && _sb$groupChannel2.removeGroupChannelHandler) {
        sb.groupChannel.removeGroupChannelHandler(handlerId);
      }
    };
  }, [channelUrl]);
  return /*#__PURE__*/React__default.createElement(Label, {
    className: "sendbird-conversation__footer__typing-indicator__text",
    type: LabelTypography.CAPTION_2,
    color: LabelColors.ONBACKGROUND_2
  }, /*#__PURE__*/React__default.createElement(TypingIndicatorText, {
    members: typingMembers
  }));
};

export { TypingIndicatorText, TypingIndicator as default };
//# sourceMappingURL=TypingIndicator.js.map
