import React__default, { useRef, useState, useCallback } from 'react';
import ContextMenu, { MenuItems } from './ContextMenu.js';
import { L as Label, a as LabelTypography, b as LabelColors } from '../index-4372fcec.js';
import UserProfile from './UserProfile.js';
import useSendbirdStateContext from '../useSendbirdStateContext.js';
import '../_rollupPluginBabelHelpers-4f8ebde4.js';
import 'react-dom';
import './SortByRow.js';
import '../uuid-a79b5ba8.js';
import '../index-eefb44ba.js';
import '../utils/message/getOutgoingMessageState.js';
import 'prop-types';
import '../stringSet-eefbc798.js';
import '../LocalizationContext-b2390bf8.js';
import '../index-67135027.js';
import '../UserProfileContext-d5787c95.js';
import '../sendbirdSelectors.js';
import '../topics-f3629ea0.js';
import '../utils-b53fe532.js';
import './Avatar.js';
import './ImageRenderer.js';
import './Icon.js';
import './Button.js';
import '../withSendbird.js';

function MentionLabel(props) {
  var _sendbirdState$config, _sendbirdState$stores, _sendbirdState$stores2;
  const {
    mentionTemplate,
    mentionedUserId,
    mentionedUserNickname,
    isByMe
  } = props;
  const mentionRef = useRef();
  const sendbirdState = useSendbirdStateContext();
  const userId = sendbirdState === null || sendbirdState === void 0 ? void 0 : (_sendbirdState$config = sendbirdState.config) === null || _sendbirdState$config === void 0 ? void 0 : _sendbirdState$config.userId;
  const sdk = sendbirdState === null || sendbirdState === void 0 ? void 0 : (_sendbirdState$stores = sendbirdState.stores) === null || _sendbirdState$stores === void 0 ? void 0 : (_sendbirdState$stores2 = _sendbirdState$stores.sdkStore) === null || _sendbirdState$stores2 === void 0 ? void 0 : _sendbirdState$stores2.sdk;
  const amIBeingMentioned = userId === mentionedUserId;
  const [user, setUser] = useState();
  const fetchUser = useCallback(toggleDropdown => {
    if (user || !(sdk !== null && sdk !== void 0 && sdk.createApplicationUserListQuery)) {
      toggleDropdown();
      return;
    }
    const query = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery({
      userIdsFilter: [mentionedUserId]
    });
    query.next().then(members => {
      if ((members === null || members === void 0 ? void 0 : members.length) > 0) {
        setUser(members[0]);
      }
      toggleDropdown();
    });
  }, [sdk, mentionedUserId]);
  return /*#__PURE__*/React__default.createElement(ContextMenu, {
    menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement("a", {
      className: `
            sendbird-word__mention
            ${amIBeingMentioned ? 'sendbird-word__mention--me' : ''}
          `,
      onClick: () => fetchUser(toggleDropdown),
      ref: mentionRef,
      "data-userid": mentionedUserId,
      "data-nickname": mentionedUserNickname,
      "data-sb-mention": true
    }, /*#__PURE__*/React__default.createElement(Label, {
      type: LabelTypography.CAPTION_1,
      color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1
    }, `${mentionTemplate}${mentionedUserNickname}`)),
    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems
    /**
    * parentRef: For catching location(x, y) of MenuItems
    * parentContainRef: For toggling more options(menus & reactions)
    */, {
      parentRef: mentionRef,
      parentContainRef: mentionRef,
      closeDropdown: closeDropdown,
      style: {
        paddingTop: '0px',
        paddingBottom: '0px'
      }
    }, /*#__PURE__*/React__default.createElement(UserProfile, {
      user: user,
      onSuccess: closeDropdown,
      currentUserId: userId
    }))
  });
}

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