import React__default, { useState } from 'react';
import ContextMenu, { MenuItems, MenuItem } from './ui/ContextMenu.js';
import { q as isUserMessage, C as isSentMessage, D as isFailedMessage, E as isPendingMessage, k as isFileMessage, d as isVoiceMessage, O as isThreadMessage, F as copyToClipboard, G as getEmojiListAll } from './index-f83f0aac.js';
import { u as useLocalization } from './LocalizationContext-426f3d58.js';
import Icon, { IconTypes, IconColors } from './ui/Icon.js';
import { L as Label, a as LabelTypography, b as LabelColors } from './index-4105bc4d.js';
import BottomSheet from './ui/BottomSheet.js';
import ImageRenderer from './ui/ImageRenderer.js';
import ReactionButton from './ui/ReactionButton.js';

const MobileContextMenu = props => {
  var _message$sender, _message$threadInfo$r, _message$threadInfo;
  const {
    hideMenu,
    channel,
    message,
    replyType,
    userId,
    resendMessage,
    showEdit,
    showRemove,
    deleteMenuState,
    setQuoteMessage,
    parentRef,
    onReplyInThread,
    isOpenedFromThread = false
  } = props;
  const isByMe = (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId) === userId;
  const {
    stringSet
  } = useLocalization();
  const showMenuItemCopy = isUserMessage(message);
  const showMenuItemEdit = isUserMessage(message) && isSentMessage(message) && isByMe;
  const showMenuItemResend = isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
  const showMenuItemDelete = !isPendingMessage(message) && isByMe;
  const showMenuItemDeleteByState = isByMe && (deleteMenuState === undefined || deleteMenuState !== 'HIDE');
  const showMenuItemDeleteFinal = showMenuItemDeleteByState && showMenuItemDelete;
  const disableDelete = deleteMenuState !== undefined && deleteMenuState === 'DISABLE' || ((_message$threadInfo$r = message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) !== null && _message$threadInfo$r !== void 0 ? _message$threadInfo$r : 0) > 0;
  const showMenuItemDownload = !isPendingMessage(message) && isFileMessage(message) && !(isVoiceMessage(message) && (channel !== null && channel !== void 0 && channel.isSuper || channel !== null && channel !== void 0 && channel.isBroadcast));
  const showMenuItemReply = replyType === 'QUOTE_REPLY' && !isFailedMessage(message) && !isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
  const showMenuItemThread = replyType === 'THREAD' && !isOpenedFromThread && !isFailedMessage(message) && !isPendingMessage(message) && !isThreadMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
  const fileMessage = message;
  return /*#__PURE__*/React__default.createElement(ContextMenu, {
    isOpen: true,
    menuItems: () => {
      var _message$parentMessag, _message$parentMessag2, _message$parentMessag3;
      return /*#__PURE__*/React__default.createElement(MenuItems, {
        className: "sendbird-message__mobile-context-menu",
        parentRef: parentRef,
        parentContainRef: parentRef,
        closeDropdown: hideMenu
      }, showMenuItemCopy && /*#__PURE__*/React__default.createElement(MenuItem, {
        className: "sendbird-message__mobile-context-menu-item menu-item-copy",
        onClick: () => {
          hideMenu();
          copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
        },
        dataSbId: "ui_mobile_message_item_menu_copy"
      }, /*#__PURE__*/React__default.createElement(Label, {
        type: LabelTypography.SUBTITLE_1,
        color: LabelColors.ONBACKGROUND_1
      }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__COPY), /*#__PURE__*/React__default.createElement(Icon, {
        type: IconTypes.COPY,
        fillColor: IconColors.PRIMARY,
        width: "24px",
        height: "24px"
      })), showMenuItemReply && /*#__PURE__*/React__default.createElement(MenuItem, {
        className: "sendbird-message__mobile-context-menu-item menu-item-reply",
        onClick: () => {
          hideMenu();
          setQuoteMessage(message);
        },
        disable: ((_message$parentMessag = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _message$parentMessag !== void 0 ? _message$parentMessag : 0) > 0,
        dataSbId: "ui_mobile_message_item_menu_reply"
      }, /*#__PURE__*/React__default.createElement(Label, {
        type: LabelTypography.SUBTITLE_1,
        color: ((_message$parentMessag2 = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _message$parentMessag2 !== void 0 ? _message$parentMessag2 : 0) > 0 ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
      }, stringSet.MESSAGE_MENU__REPLY), /*#__PURE__*/React__default.createElement(Icon, {
        type: IconTypes.REPLY,
        fillColor: ((_message$parentMessag3 = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _message$parentMessag3 !== void 0 ? _message$parentMessag3 : 0) > 0 ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY,
        width: "24px",
        height: "24px"
      })), showMenuItemThread && /*#__PURE__*/React__default.createElement(MenuItem, {
        className: "sendbird-message__mobile-context-menu-item menu-item-reply",
        onClick: () => {
          hideMenu();
          onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
            message
          });
        },
        dataSbId: "ui_mobile_message_item_menu_thread"
      }, /*#__PURE__*/React__default.createElement(Label, {
        type: LabelTypography.SUBTITLE_1,
        color: LabelColors.ONBACKGROUND_1
      }, stringSet.MESSAGE_MENU__THREAD), /*#__PURE__*/React__default.createElement(Icon, {
        type: IconTypes.THREAD,
        fillColor: IconColors.PRIMARY,
        width: "24px",
        height: "24px"
      })), showMenuItemEdit && /*#__PURE__*/React__default.createElement(MenuItem, {
        className: "sendbird-message__mobile-context-menu-item menu-item-edit",
        onClick: () => {
          hideMenu();
          showEdit(true);
        },
        dataSbId: "ui_mobile_message_item_menu_edit"
      }, /*#__PURE__*/React__default.createElement(Label, {
        type: LabelTypography.SUBTITLE_1,
        color: LabelColors.ONBACKGROUND_1
      }, stringSet.MESSAGE_MENU__EDIT), /*#__PURE__*/React__default.createElement(Icon, {
        type: IconTypes.EDIT,
        fillColor: IconColors.PRIMARY,
        width: "24px",
        height: "24px"
      })), showMenuItemResend && /*#__PURE__*/React__default.createElement(MenuItem, {
        className: "sendbird-message__mobile-context-menu-item menu-item-resend",
        onClick: () => {
          hideMenu();
          resendMessage(message);
        },
        dataSbId: "ui_mobile_message_item_menu_resend"
      }, /*#__PURE__*/React__default.createElement(Label, {
        type: LabelTypography.SUBTITLE_1,
        color: LabelColors.ONBACKGROUND_1
      }, stringSet.MESSAGE_MENU__RESEND), /*#__PURE__*/React__default.createElement(Icon, {
        type: IconTypes.REFRESH,
        fillColor: IconColors.PRIMARY,
        width: "24px",
        height: "24px"
      })), showMenuItemDeleteFinal && /*#__PURE__*/React__default.createElement(MenuItem, {
        className: "sendbird-message__mobile-context-menu-item menu-item-delete",
        onClick: () => {
          if (!disableDelete) {
            hideMenu();
            showRemove(true);
          }
        },
        disable: disableDelete,
        dataSbId: "ui_mobile_message_item_menu_delete"
      }, /*#__PURE__*/React__default.createElement(Label, {
        type: LabelTypography.SUBTITLE_1,
        color: disableDelete ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
      }, stringSet.MESSAGE_MENU__DELETE), /*#__PURE__*/React__default.createElement(Icon, {
        type: IconTypes.DELETE,
        fillColor: disableDelete ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY,
        width: "24px",
        height: "24px"
      })), showMenuItemDownload && /*#__PURE__*/React__default.createElement(MenuItem, {
        className: "sendbird-message__mobile-context-menu-item menu-item-save",
        onClick: () => {
          hideMenu();
        },
        dataSbId: "ui_mobile_message_item_menu_download_file"
      }, /*#__PURE__*/React__default.createElement("a", {
        className: "sendbird-message__contextmenu--hyperlink",
        rel: "noopener noreferrer",
        href: fileMessage === null || fileMessage === void 0 ? void 0 : fileMessage.url,
        target: "_blank"
      }, /*#__PURE__*/React__default.createElement(Label, {
        type: LabelTypography.SUBTITLE_1,
        color: LabelColors.ONBACKGROUND_1
      }, stringSet.MESSAGE_MENU__SAVE), /*#__PURE__*/React__default.createElement(Icon, {
        type: IconTypes.DOWNLOAD,
        fillColor: IconColors.PRIMARY,
        width: "24px",
        height: "24px"
      }))));
    }
  });
};

const EMOJI_SIZE = 38;
const MobileBottomSheet = props => {
  var _message$sender, _message$threadInfo$r, _message$threadInfo;
  const {
    hideMenu,
    channel,
    emojiContainer,
    message,
    replyType,
    userId,
    resendMessage,
    toggleReaction,
    isReactionEnabled,
    showEdit,
    showRemove,
    deleteMenuState,
    setQuoteMessage,
    onReplyInThread,
    isOpenedFromThread = false
  } = props;
  const isByMe = (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId) === userId;
  const {
    stringSet
  } = useLocalization();
  const showMenuItemCopy = isUserMessage(message);
  const showMenuItemEdit = isUserMessage(message) && isSentMessage(message) && isByMe;
  const showMenuItemResend = isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
  const showMenuItemDelete = !isPendingMessage(message) && isByMe;
  const showMenuItemDeleteByState = isByMe && (deleteMenuState === undefined || deleteMenuState !== 'HIDE');
  const showMenuItemDeleteFinal = showMenuItemDeleteByState && showMenuItemDelete;
  const disableDelete = deleteMenuState !== undefined && deleteMenuState === 'DISABLE' || ((_message$threadInfo$r = message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) !== null && _message$threadInfo$r !== void 0 ? _message$threadInfo$r : 0) > 0;
  const showMenuItemDownload = !isPendingMessage(message) && isFileMessage(message) && !isVoiceMessage(message);
  const showReaction = !isFailedMessage(message) && !isPendingMessage(message) && isReactionEnabled;
  const showMenuItemReply = replyType === 'QUOTE_REPLY' && !isFailedMessage(message) && !isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel !== null && channel !== void 0 && channel.isBroadcast);
  const showMenuItemThread = replyType === 'THREAD' && !isOpenedFromThread && !isFailedMessage(message) && !isPendingMessage(message) && !isThreadMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel !== null && channel !== void 0 && channel.isBroadcast);
  const disableReaction = (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0;
  const fileMessage = message;
  const maxEmojisPerRow = Math.floor(window.innerWidth / EMOJI_SIZE) - 1;
  const [showEmojisOnly, setShowEmojisOnly] = useState(false);
  const emojis = getEmojiListAll(emojiContainer);
  // calculate max emojis that can be shown in screen
  const visibleEmojis = showEmojisOnly ? emojis : emojis === null || emojis === void 0 ? void 0 : emojis.slice(0, maxEmojisPerRow);
  const canShowMoreEmojis = emojis.length > maxEmojisPerRow;
  return /*#__PURE__*/React__default.createElement(BottomSheet, {
    onBackdropClick: hideMenu
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet"
  }, showReaction && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet-reactions"
  }, /*#__PURE__*/React__default.createElement("ul", {
    className: "sendbird-message__bottomsheet-reaction-bar"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: `
                    sendbird-message__bottomsheet-reaction-bar__row
                    ${showEmojisOnly ? 'sendbird-message__bottomsheet-reaction-bar__all' : ''}
                  `
  }, visibleEmojis.map(emoji => {
    var _message$reactions, _message$reactions$fi, _message$reactions$fi2;
    const isReacted = message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi = _message$reactions.filter(reaction => reaction.key === emoji.key)[0]) === null || _message$reactions$fi === void 0 ? void 0 : (_message$reactions$fi2 = _message$reactions$fi.userIds) === null || _message$reactions$fi2 === void 0 ? void 0 : _message$reactions$fi2.some(reactorId => reactorId === userId);
    return /*#__PURE__*/React__default.createElement(ReactionButton, {
      key: emoji.key,
      width: `${EMOJI_SIZE}px`,
      height: `${EMOJI_SIZE}px`,
      selected: isReacted,
      onClick: () => {
        hideMenu();
        toggleReaction(message, emoji.key, isReacted);
      },
      dataSbId: `ui_mobile_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"
      }))
    }));
  }), canShowMoreEmojis && !showEmojisOnly && /*#__PURE__*/React__default.createElement(ReactionButton, {
    key: "emoji_more",
    width: "38px",
    height: "38px",
    onClick: () => {
      setShowEmojisOnly(true);
    },
    dataSbId: "ui_mobile_emoji_reactions_menu_emojiadd"
  }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
    url: '',
    width: "28px",
    height: "28px",
    placeHolder: style => /*#__PURE__*/React__default.createElement("div", {
      style: style
    }, /*#__PURE__*/React__default.createElement(Icon, {
      type: IconTypes.EMOJI_MORE,
      fillColor: IconColors.ON_BACKGROUND_3,
      width: "28px",
      height: "28px"
    }))
  }))))), !showEmojisOnly && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet--actions"
  }, showMenuItemCopy && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet--action",
    onClick: () => {
      hideMenu();
      copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
    }
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.COPY,
    fillColor: IconColors.PRIMARY,
    width: "24px",
    height: "24px"
  }), /*#__PURE__*/React__default.createElement(Label, {
    type: LabelTypography.SUBTITLE_1,
    color: LabelColors.ONBACKGROUND_1
  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__COPY)), showMenuItemEdit && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet--action",
    onClick: () => {
      hideMenu();
      showEdit(true);
    }
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.EDIT,
    fillColor: IconColors.PRIMARY,
    width: "24px",
    height: "24px"
  }), /*#__PURE__*/React__default.createElement(Label, {
    type: LabelTypography.SUBTITLE_1,
    color: LabelColors.ONBACKGROUND_1
  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__EDIT)), showMenuItemResend && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet--action",
    onClick: () => {
      hideMenu();
      resendMessage(message);
    }
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.REFRESH,
    fillColor: IconColors.PRIMARY,
    width: "24px",
    height: "24px"
  }), /*#__PURE__*/React__default.createElement(Label, {
    type: LabelTypography.SUBTITLE_1,
    color: LabelColors.ONBACKGROUND_1
  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__RESEND)), showMenuItemReply && /*#__PURE__*/React__default.createElement("div", {
    className: `sendbird-message__bottomsheet--action
                      ${disableReaction ? 'sendbird-message__bottomsheet--action-disabled' : ''}
                    `,
    role: "menuitem",
    "aria-disabled": disableReaction ? true : false,
    onClick: () => {
      if (!disableReaction) {
        hideMenu();
        setQuoteMessage(message);
      }
    }
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.REPLY,
    fillColor: disableReaction ? IconColors.ON_BACKGROUND_3 : IconColors.PRIMARY,
    width: "24px",
    height: "24px"
  }), /*#__PURE__*/React__default.createElement(Label, {
    type: LabelTypography.SUBTITLE_1,
    color: disableReaction ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__REPLY)), showMenuItemThread && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet--action",
    onClick: () => {
      hideMenu();
      onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
        message
      });
    }
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.THREAD,
    fillColor: IconColors.PRIMARY,
    width: "24px",
    height: "24px"
  }), /*#__PURE__*/React__default.createElement(Label, {
    type: LabelTypography.SUBTITLE_1,
    color: LabelColors.ONBACKGROUND_1
  }, stringSet.MESSAGE_MENU__THREAD)), showMenuItemDeleteFinal && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet--action",
    onClick: () => {
      if (!disableDelete) {
        hideMenu();
        showRemove === null || showRemove === void 0 ? void 0 : showRemove(true);
      }
    }
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.DELETE,
    fillColor: disableDelete ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY,
    width: "24px",
    height: "24px"
  }), /*#__PURE__*/React__default.createElement(Label, {
    type: LabelTypography.SUBTITLE_1,
    color: disableDelete ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__DELETE)), showMenuItemDownload && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-message__bottomsheet--action",
    onClick: () => {
      hideMenu();
    }
  }, /*#__PURE__*/React__default.createElement("a", {
    className: "sendbird-message__bottomsheet--hyperlink",
    rel: "noopener noreferrer",
    href: fileMessage === null || fileMessage === void 0 ? void 0 : fileMessage.url,
    target: "_blank"
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.DOWNLOAD,
    fillColor: IconColors.PRIMARY,
    width: "24px",
    height: "24px"
  }), /*#__PURE__*/React__default.createElement(Label, {
    type: LabelTypography.SUBTITLE_1,
    color: LabelColors.ONBACKGROUND_1
  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__SAVE))))));
};

const MobileMenu = props => {
  const {
    message,
    hideMenu,
    userId,
    channel,
    isReactionEnabled = false,
    isByMe,
    replyType,
    disabled,
    deleteMenuState,
    showRemove,
    showEdit,
    resendMessage,
    setQuoteMessage,
    emojiContainer,
    toggleReaction,
    parentRef,
    onReplyInThread,
    isOpenedFromThread
  } = props;
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isReactionEnabled ? /*#__PURE__*/React__default.createElement(MobileBottomSheet, {
    channel: channel,
    message: message,
    hideMenu: hideMenu,
    isByMe: isByMe,
    userId: userId,
    replyType: replyType,
    disabled: disabled,
    showRemove: showRemove,
    showEdit: showEdit,
    deleteMenuState: deleteMenuState,
    resendMessage: resendMessage,
    setQuoteMessage: setQuoteMessage,
    emojiContainer: emojiContainer,
    toggleReaction: toggleReaction,
    isReactionEnabled: isReactionEnabled,
    onReplyInThread: onReplyInThread,
    isOpenedFromThread: isOpenedFromThread
  }) : /*#__PURE__*/React__default.createElement(MobileContextMenu, {
    channel: channel,
    userId: userId,
    message: message,
    hideMenu: hideMenu,
    isByMe: isByMe,
    showEdit: showEdit,
    replyType: replyType,
    disabled: disabled,
    deleteMenuState: deleteMenuState,
    showRemove: showRemove,
    resendMessage: resendMessage,
    setQuoteMessage: setQuoteMessage,
    parentRef: parentRef,
    onReplyInThread: onReplyInThread,
    isOpenedFromThread: isOpenedFromThread
  }));
};

export { MobileMenu as M };
//# sourceMappingURL=index-eefc5b10.js.map
