import React__default, { useState, useContext, useMemo, useRef } from 'react';
import ReactionBadge from './ReactionBadge.js';
import ReactionButton from './ReactionButton.js';
import ImageRenderer from './ImageRenderer.js';
import Icon, { IconTypes, IconColors } from './Icon.js';
import ContextMenu, { EmojiListItems } from './ContextMenu.js';
import { H as getEmojiUrl, I as isReactedBy, J as getEmojiTooltipString, G as getEmojiListAll, K as getEmojiMapAll, h as getClassName } from '../index-f83f0aac.js';
import BottomSheet from './BottomSheet.js';
import { L as Label, a as LabelTypography, b as LabelColors } from '../index-4105bc4d.js';
import UserListItem from './UserListItem.js';
import Tooltip from './Tooltip.js';
import TooltipWrapper from './TooltipWrapper.js';
import { u as useMediaQueryContext } from '../MediaQueryContext-b531adc9.js';
import { u as useLongPress } from '../useLongPress-c0ba590c.js';
import { a as LocalizationContext } from '../LocalizationContext-426f3d58.js';
import useSendbirdStateContext from '../useSendbirdStateContext.js';
import { useMessageContext } from '../Message/context.js';
import { b as _extends } from '../_rollupPluginBabelHelpers-a69fd1ce.js';
import '../utils-4bf6e4e6.js';
import 'prop-types';
import 'react-dom';
import './SortByRow.js';
import '../uuid-2e8efc75.js';
import '../utils/message/getOutgoingMessageState.js';
import '../stringSet-a62108b2.js';
import '../index-3e548496.js';
import '../UserProfileContext-a59f0533.js';
import './Avatar.js';
import './MutedAvatarOverlay.js';
import './Checkbox.js';
import './UserProfile.js';
import '../sendbirdSelectors.js';
import '../topics-247fcf3a.js';
import './Button.js';
import '../index-90420b99.js';
import '../withSendbird.js';

const ReactedMembersBottomSheet = _ref => {
  var _message$reactions, _message$reactions2, _message$reactions2$f;
  let {
    message,
    channel,
    emojiKey = '',
    hideMenu,
    emojiContainer
  } = _ref;
  const {
    members = []
  } = channel;
  const [selectedEmoji, setSelectedEmoji] = useState(emojiKey);
  return /*#__PURE__*/React__default.createElement(BottomSheet, {
    onBackdropClick: hideMenu
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet__reacted-members"
  }, (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.map(reaction => {
    const emojiUrl = getEmojiUrl(emojiContainer, reaction.key);
    return /*#__PURE__*/React__default.createElement("div", {
      key: reaction.key,
      className: `
                  sendbird-message__bottomsheet__reacted-members__item
                  ${selectedEmoji === reaction.key ? 'sendbird-message__bottomsheet__reacted-members__item__selected' : ''}
                `,
      onClick: () => {
        setSelectedEmoji(reaction.key);
      }
    }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
      url: emojiUrl,
      width: "28px",
      height: "28px",
      placeHolder: style => /*#__PURE__*/React__default.createElement("div", {
        style: style
      }, /*#__PURE__*/React__default.createElement(Icon, {
        type: IconTypes.QUESTION,
        fillColor: IconColors.ON_BACKGROUND_3,
        width: "28px",
        height: "28px"
      }))
    }), /*#__PURE__*/React__default.createElement(Label, {
      type: LabelTypography.BUTTON_2,
      color: selectedEmoji === reaction.key ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3
    }, reaction.userIds.length));
  })), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet__reactor-list"
  },
  // making a member list who reacted to the message with the `selectedEmoji`
  ((_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : (_message$reactions2$f = _message$reactions2.find(reaction => reaction.key === selectedEmoji)) === null || _message$reactions2$f === void 0 ? void 0 : _message$reactions2$f.userIds.map(userId => members.find(member => member.userId === userId)).filter(member => member !== undefined)).map(member => /*#__PURE__*/React__default.createElement(UserListItem, {
    key: member.userId,
    className: "sendbird-message__bottomsheet__reactor-list__item",
    user: member,
    avatarSize: "36px"
  })))));
};

function ReactionItem(_ref) {
  var _emojisMap$get;
  let {
    reaction,
    memberNicknamesMap,
    setEmojiKey,
    toggleReaction,
    emojisMap,
    channel
  } = _ref;
  const store = useSendbirdStateContext();
  const {
    isMobile
  } = useMediaQueryContext();
  const messageStore = useMessageContext();
  const message = messageStore === null || messageStore === void 0 ? void 0 : messageStore.message;
  const {
    stringSet
  } = useContext(LocalizationContext);
  const userId = store.config.userId;
  const reactedByMe = isReactedBy(userId, reaction);
  const showHoverTooltip = reaction.userIds.length > 0 && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !channel.isSuper;
  const handleOnClick = () => {
    setEmojiKey('');
    toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, reaction.key, reactedByMe);
  };
  const longPress = useLongPress({
    onLongPress: () => {
      setEmojiKey(reaction.key);
    },
    onClick: handleOnClick
  }, {
    shouldPreventDefault: true,
    shouldStopPropagation: true
  });
  return /*#__PURE__*/React__default.createElement(TooltipWrapper, {
    className: "sendbird-emoji-reactions__reaction-badge",
    hoverTooltip: showHoverTooltip ? /*#__PURE__*/React__default.createElement(Tooltip, null, getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null)
  }, /*#__PURE__*/React__default.createElement("div", isMobile ? longPress : {
    onClick: handleOnClick
  }, /*#__PURE__*/React__default.createElement(ReactionBadge, {
    count: reaction.userIds.length,
    selected: reactedByMe
  }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
    circle: true,
    url: ((_emojisMap$get = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _emojisMap$get === void 0 ? void 0 : _emojisMap$get.url) || '',
    width: "20px",
    height: "20px",
    defaultComponent: /*#__PURE__*/React__default.createElement(Icon, {
      width: "20px",
      height: "20px",
      type: IconTypes.QUESTION
    })
  }))));
}

const AddReactionBadgeItem = _ref => {
  let {
    onClick
  } = _ref;
  const onlyClick = useLongPress({
    onLongPress: () => {/* noop */},
    onClick
  }, {
    shouldPreventDefault: true,
    shouldStopPropagation: true
  });
  return /*#__PURE__*/React__default.createElement("div", _extends({
    className: "sendbird-emoji-reactions__add-reaction-badge"
  }, onlyClick), /*#__PURE__*/React__default.createElement(ReactionBadge, {
    isAdd: true
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.EMOJI_MORE,
    fillColor: IconColors.ON_BACKGROUND_3,
    width: "20px",
    height: "20px"
  })));
};

const MobileEmojisBottomSheet = _ref => {
  let {
    userId,
    message,
    emojiContainer,
    hideMenu,
    toggleReaction
  } = _ref;
  const emojiAllList = useMemo(() => {
    return getEmojiListAll(emojiContainer);
  }, [emojiContainer]);
  return /*#__PURE__*/React__default.createElement(BottomSheet, {
    onBackdropClick: hideMenu
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet sendbird-message__emojis-bottomsheet"
  }, emojiAllList.map(emoji => {
    var _message$reactions$fi, _message$reactions, _message$reactions$fi2, _message$reactions$fi3;
    const isReacted = (_message$reactions$fi = message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi2 = _message$reactions.find(reaction => reaction.key === emoji.key)) === null || _message$reactions$fi2 === void 0 ? void 0 : (_message$reactions$fi3 = _message$reactions$fi2.userIds) === null || _message$reactions$fi3 === void 0 ? void 0 : _message$reactions$fi3.some(reactorId => reactorId === userId)) !== null && _message$reactions$fi !== void 0 ? _message$reactions$fi : false;
    return /*#__PURE__*/React__default.createElement(ReactionButton, {
      key: emoji.key,
      width: "44px",
      height: "44px",
      selected: isReacted,
      onClick: e => {
        e === null || e === void 0 ? void 0 : e.stopPropagation();
        toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
        hideMenu();
      },
      dataSbId: `ui_mobile_emoji_reactions_menu_${emoji.key}`
    }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
      url: emoji.url,
      width: "38px",
      height: "38px",
      placeHolder: style => /*#__PURE__*/React__default.createElement("div", {
        style: style
      }, /*#__PURE__*/React__default.createElement(Icon, {
        type: IconTypes.QUESTION,
        fillColor: IconColors.ON_BACKGROUND_3,
        width: "28px",
        height: "28px"
      }))
    }));
  })));
};

const EmojiReactions = _ref => {
  var _message$reactions$le, _message$reactions, _message$reactions$le2, _message$reactions2, _message$reactions3;
  let {
    className = '',
    userId,
    message,
    channel,
    emojiContainer,
    memberNicknamesMap,
    spaceFromTrigger = {
      x: 0,
      y: 0
    },
    isByMe = false,
    toggleReaction
  } = _ref;
  const {
    isMobile
  } = useMediaQueryContext();
  const addReactionRef = useRef(null);
  const [showEmojiList, setShowEmojiList] = useState(false);
  const [selectedEmojiKey, setSelectedEmojiKey] = useState('');
  const emojisMap = getEmojiMapAll(emojiContainer);
  const showAddReactionBadge = ((_message$reactions$le = (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) !== null && _message$reactions$le !== void 0 ? _message$reactions$le : 0) < emojisMap.size;
  return /*#__PURE__*/React__default.createElement("div", {
    className: getClassName([className, 'sendbird-emoji-reactions', isByMe ? 'outgoing' : 'incoming'])
  }, ((_message$reactions$le2 = (_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : _message$reactions2.length) !== null && _message$reactions$le2 !== void 0 ? _message$reactions$le2 : 0) > 0 && ((_message$reactions3 = message.reactions) === null || _message$reactions3 === void 0 ? void 0 : _message$reactions3.map(reaction => {
    return /*#__PURE__*/React__default.createElement(ReactionItem, {
      key: reaction === null || reaction === void 0 ? void 0 : reaction.key,
      reaction: reaction,
      memberNicknamesMap: memberNicknamesMap,
      setEmojiKey: setSelectedEmojiKey,
      toggleReaction: toggleReaction,
      emojisMap: emojisMap,
      channel: channel
    });
  })), !isMobile && showAddReactionBadge && /*#__PURE__*/React__default.createElement(ContextMenu, {
    menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(ReactionBadge, {
      className: "sendbird-emoji-reactions__add-reaction-badge",
      ref: addReactionRef,
      isAdd: true,
      onClick: e => {
        var _e$stopPropagation;
        toggleDropdown();
        e === null || e === void 0 ? void 0 : (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
      }
    }, /*#__PURE__*/React__default.createElement(Icon, {
      type: IconTypes.EMOJI_MORE,
      fillColor: IconColors.ON_BACKGROUND_3,
      width: "20px",
      height: "20px"
    })),
    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(EmojiListItems, {
      parentRef: addReactionRef,
      parentContainRef: addReactionRef,
      closeDropdown: closeDropdown,
      spaceFromTrigger: spaceFromTrigger
    }, getEmojiListAll(emojiContainer).map(emoji => {
      var _message$reactions4, _message$reactions4$f, _message$reactions4$f2;
      const isReacted = (message === null || message === void 0 ? void 0 : (_message$reactions4 = message.reactions) === null || _message$reactions4 === void 0 ? void 0 : (_message$reactions4$f = _message$reactions4.find(reaction => reaction.key === emoji.key)) === null || _message$reactions4$f === void 0 ? void 0 : (_message$reactions4$f2 = _message$reactions4$f.userIds) === null || _message$reactions4$f2 === void 0 ? void 0 : _message$reactions4$f2.some(reactorId => reactorId === userId)) || false;
      return /*#__PURE__*/React__default.createElement(ReactionButton, {
        key: emoji.key,
        width: "36px",
        height: "36px",
        selected: isReacted,
        onClick: e => {
          closeDropdown();
          toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
          e === null || e === void 0 ? void 0 : e.stopPropagation();
        },
        dataSbId: `ui_emoji_reactions_menu_${emoji.key}`
      }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
        url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
        width: "28px",
        height: "28px",
        placeHolder: style => /*#__PURE__*/React__default.createElement("div", {
          style: style
        }, /*#__PURE__*/React__default.createElement(Icon, {
          type: IconTypes.QUESTION,
          fillColor: IconColors.ON_BACKGROUND_3,
          width: "28px",
          height: "28px"
        }))
      }));
    }))
  }), isMobile && showAddReactionBadge && /*#__PURE__*/React__default.createElement(AddReactionBadgeItem, {
    onClick: () => {
      setShowEmojiList(true);
    }
  }), isMobile && showEmojiList && /*#__PURE__*/React__default.createElement(MobileEmojisBottomSheet, {
    userId: userId,
    message: message,
    emojiContainer: emojiContainer,
    hideMenu: () => {
      setShowEmojiList(false);
    },
    toggleReaction: toggleReaction
  }), isMobile && selectedEmojiKey && channel !== null && /*#__PURE__*/React__default.createElement(ReactedMembersBottomSheet, {
    message: message,
    channel: channel,
    emojiKey: selectedEmojiKey,
    hideMenu: () => {
      setSelectedEmojiKey('');
    },
    emojiContainer: emojiContainer
  }));
};

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