'use strict';

var React = require('react');
var ui_ContextMenu = require('./ContextMenu.js');
var ui_Label = require('../index-35633fb6.js');
var ui_UserProfile = require('./UserProfile.js');
var useSendbirdStateContext = require('../useSendbirdStateContext.js');
require('../_rollupPluginBabelHelpers-acf412a3.js');
require('react-dom');
require('./SortByRow.js');
require('../uuid-1eceb0c8.js');
require('../index-a91b85d9.js');
require('../utils/message/getOutgoingMessageState.js');
require('prop-types');
require('../stringSet-ce782136.js');
require('../LocalizationContext-8cc9717d.js');
require('../index-d749c4c2.js');
require('../UserProfileContext-d993c96b.js');
require('../sendbirdSelectors.js');
require('../topics-e24ef339.js');
require('../utils-5aa0708e.js');
require('./Avatar.js');
require('./ImageRenderer.js');
require('./Icon.js');
require('./Button.js');
require('../withSendbird.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function MentionLabel(props) {
  var _sendbirdState$config, _sendbirdState$stores, _sendbirdState$stores2;
  const {
    mentionTemplate,
    mentionedUserId,
    mentionedUserNickname,
    isByMe
  } = props;
  const mentionRef = React.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] = React.useState();
  const fetchUser = React.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["default"].createElement(ui_ContextMenu["default"], {
    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["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["default"].createElement(ui_Label.Label, {
      type: ui_Label.LabelTypography.CAPTION_1,
      color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
    }, `${mentionTemplate}${mentionedUserNickname}`)),
    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.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["default"].createElement(ui_UserProfile, {
      user: user,
      onSuccess: closeDropdown,
      currentUserId: userId
    }))
  });
}

module.exports = MentionLabel;
//# sourceMappingURL=MentionLabel.js.map
