import React__default, { useContext, useState, useEffect, useRef, useCallback } from 'react';
import Button, { ButtonTypes, ButtonSizes } from './ui/Button.js';
import ContextMenu, { MenuItems, MenuItem } from './ui/ContextMenu.js';
import Icon, { IconTypes, IconColors } from './ui/Icon.js';
import IconButton from './ui/IconButton.js';
import { L as Label, a as LabelTypography, b as LabelColors } from './index-f50d7ab0.js';
import { a as LocalizationContext } from './LocalizationContext-1701e5c8.js';
import { a as UserProfileContext } from './UserProfileContext-74e9a128.js';
import './context-b513d868.js';
import Avatar from './ui/Avatar.js';
import 'react-dom';
import MutedAvatarOverlay from './ui/MutedAvatarOverlay.js';
import UserProfile from './ui/UserProfile.js';
import '@sendbird/chat/openChannel';
import Modal from './ui/Modal.js';
import UserListItem$1 from './ui/UserListItem.js';
import { n as noop } from './utils-05aa9060.js';
import { useOpenChannelSettingsContext } from './OpenChannelSettings/context.js';
import useSendbirdStateContext from './useSendbirdStateContext.js';

function ParticipantsModal(_ref) {
  var _state$config, _state$stores, _state$stores$sdkStor;
  let {
    onCancel
  } = _ref;
  const state = useSendbirdStateContext();
  const {
    channel
  } = useOpenChannelSettingsContext();
  const {
    stringSet
  } = useContext(LocalizationContext);
  const [participants, setParticipants] = useState([]);
  const [participantListQuery, setParticipantListQuery] = useState(null);
  const userId = state === null || state === void 0 ? void 0 : (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.userId;
  const sdk = state === null || state === void 0 ? void 0 : (_state$stores = state.stores) === null || _state$stores === void 0 ? void 0 : (_state$stores$sdkStor = _state$stores.sdkStore) === null || _state$stores$sdkStor === void 0 ? void 0 : _state$stores$sdkStor.sdk;
  const isOperatorView = channel === null || channel === void 0 ? void 0 : channel.isOperator(userId);
  useEffect(() => {
    if (!channel || !(channel !== null && channel !== void 0 && channel.createParticipantListQuery)) {
      return;
    }
    const participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({});
    setParticipantListQuery(participantListQuery);
    participantListQuery.next().then(participantList => {
      setParticipants(participantList);
    });
  }, []);
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Modal, {
    hideFooter: true,
    isFullScreenOnMobile: true,
    onCancel: () => onCancel(),
    onSubmit: noop,
    titleText: stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-more-members__popup-scroll",
    onScroll: e => {
      const {
        hasNext
      } = participantListQuery;
      const target = e.target;
      const fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
      if (hasNext && fetchMore) {
        participantListQuery.next().then(fetchedParticipants => {
          setParticipants([...participants, ...fetchedParticipants]);
        });
      }
    }
  }, participants.map(p => {
    var _sdk$currentUser;
    const isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
    return /*#__PURE__*/React__default.createElement(UserListItem$1, {
      user: p,
      key: p.userId,
      currentUser: sdk === null || sdk === void 0 ? void 0 : (_sdk$currentUser = sdk.currentUser) === null || _sdk$currentUser === void 0 ? void 0 : _sdk$currentUser.userId,
      action: userId !== p.userId && isOperatorView ? _ref2 => {
        let {
          actionRef,
          parentRef
        } = _ref2;
        return /*#__PURE__*/React__default.createElement(ContextMenu, {
          menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(IconButton, {
            className: "sendbird-user-message__more__menu",
            width: "32px",
            height: "32px",
            onClick: toggleDropdown
          }, /*#__PURE__*/React__default.createElement(Icon, {
            width: "24px",
            height: "24px",
            type: IconTypes.MORE,
            fillColor: IconColors.CONTENT_INVERSE
          })),
          menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems, {
            parentContainRef: parentRef,
            parentRef: actionRef,
            closeDropdown: closeDropdown,
            openLeft: true
          }, /*#__PURE__*/React__default.createElement(MenuItem, {
            onClick: () => {
              if (isOperator) {
                channel === null || channel === void 0 ? void 0 : channel.removeOperators([p.userId]).then(() => {
                  closeDropdown();
                });
              } else {
                channel === null || channel === void 0 ? void 0 : channel.addOperators([p.userId]).then(() => {
                  closeDropdown();
                });
              }
            },
            dataSbId: `open_channel_setting_participant_context_menu_${isOperator ? 'unregister_operator' : 'register_as_operator'}`
          }, isOperator ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR), /*#__PURE__*/React__default.createElement(MenuItem, {
            onClick: () => {
              if (p.isMuted) {
                channel === null || channel === void 0 ? void 0 : channel.unmuteUser(p).then(() => {
                  closeDropdown();
                });
              } else {
                channel === null || channel === void 0 ? void 0 : channel.muteUser(p).then(() => {
                  closeDropdown();
                });
              }
            },
            dataSbId: `open_channel_setting_participant_context_menu_${p.isMuted ? 'unmute' : 'mute'}`
          }, p.isMuted ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE), /*#__PURE__*/React__default.createElement(MenuItem, {
            onClick: () => {
              channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(() => {
                closeDropdown();
              });
            },
            dataSbId: "open_channel_setting_participant_context_menu_ban"
          }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))
        });
      } : null
    });
  }))));
}

const UserListItem = _ref => {
  let {
    user,
    currentUser,
    isOperator,
    action
  } = _ref;
  const avatarRef = useRef(null);
  const actionRef = useRef(null);
  const {
    disableUserProfile,
    renderUserProfile
  } = useContext(UserProfileContext);
  const {
    stringSet
  } = useContext(LocalizationContext);
  return /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-participants-accordion__member"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-participants-accordion__member-avatar"
  }, /*#__PURE__*/React__default.createElement(ContextMenu, {
    menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Avatar, {
      className: "sendbird-participants-accordion__member-avatar__avatar",
      onClick: () => {
        if (!disableUserProfile) {
          toggleDropdown();
        }
      },
      ref: avatarRef,
      src: user.profileUrl,
      width: 24,
      height: 24
    }), user !== null && user !== void 0 && user.isMuted ? /*#__PURE__*/React__default.createElement(MutedAvatarOverlay, null) : ''),
    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems, {
      openLeft: true,
      parentRef: avatarRef
      // for catching location(x, y) of MenuItems
      ,
      parentContainRef: avatarRef
      // for toggling more options(menus & reactions)
      ,
      closeDropdown: closeDropdown,
      style: {
        paddingTop: '0px',
        paddingBottom: '0px'
      }
    }, renderUserProfile ? renderUserProfile({
      user: user,
      currentUserId: currentUser,
      close: closeDropdown
    }) : /*#__PURE__*/React__default.createElement(UserProfile, {
      disableMessaging: true,
      user: user,
      currentUserId: currentUser,
      onSuccess: closeDropdown
    }))
  })), /*#__PURE__*/React__default.createElement(Label, {
    className: "sendbird-participants-accordion__member__title",
    type: LabelTypography.SUBTITLE_2,
    color: LabelColors.ONBACKGROUND_1
  }, user.nickname || stringSet.NO_NAME, currentUser === user.userId && stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__YOU),
  // if there is now nickname, display userId
  !user.nickname && /*#__PURE__*/React__default.createElement(Label, {
    className: "sendbird-participants-accordion__member__title user-id",
    type: LabelTypography.CAPTION_3,
    color: LabelColors.ONBACKGROUND_2
  }, user.userId), isOperator && /*#__PURE__*/React__default.createElement(Label, {
    className: `sendbird-participants-accordion__member__title
                ${(user === null || user === void 0 ? void 0 : user.userId) !== currentUser ? 'operator' : ''}
                ${(user === null || user === void 0 ? void 0 : user.userId) === currentUser ? 'self-operator' : ''}
              `,
    type: LabelTypography.SUBTITLE_2,
    color: LabelColors.ONBACKGROUND_2
  }, stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__OPERATOR), action && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-participants-accordion__member__action",
    ref: actionRef
  }, action({
    actionRef
  })));
};

function ParticipantList(_ref) {
  var _globalState$config;
  let {
    isOperatorView = false
  } = _ref;
  const globalState = useSendbirdStateContext();
  const currentUserId = globalState === null || globalState === void 0 ? void 0 : (_globalState$config = globalState.config) === null || _globalState$config === void 0 ? void 0 : _globalState$config.userId;
  const {
    channel
  } = useOpenChannelSettingsContext();
  const {
    stringSet
  } = useContext(LocalizationContext);
  const [participants, setParticipants] = useState(null);
  const [participantListQuery, setParticipantListQuery] = useState(null);
  const [showParticipantsModal, setShowParticipantsModal] = useState(false);
  useEffect(() => {
    if (!channel || !(channel !== null && channel !== void 0 && channel.createParticipantListQuery)) {
      return;
    }
    const participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({
      limit: 10
    });
    setParticipantListQuery(participantListQuery);
    participantListQuery.next().then(participants => {
      setParticipants(participants);
    });
  }, [channel]);
  const refreshList = useCallback(() => {
    if (!channel) {
      setParticipants([]);
      return;
    }
    const participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({
      limit: 10
    });
    participantListQuery.next().then(participants => {
      setParticipants(participants);
    });
  }, [channel]);
  return /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-openchannel-settings__participant-list",
    onScroll: e => {
      const {
        hasNext
      } = participantListQuery;
      const target = e.target;
      const fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
      if (hasNext && fetchMore) {
        participantListQuery.next().then(fetchedParticipants => {
          setParticipants([...participants, ...fetchedParticipants]);
        });
      }
    }
  }, /*#__PURE__*/React__default.createElement("div", null, participants === null || participants === void 0 ? void 0 : participants.map(p => {
    const isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
    return /*#__PURE__*/React__default.createElement(UserListItem, {
      user: p,
      currentUser: currentUserId,
      key: p.userId,
      isOperator: isOperator,
      action: _ref2 => {
        let {
          actionRef
        } = _ref2;
        return isOperatorView && currentUserId !== (p === null || p === void 0 ? void 0 : p.userId) ? /*#__PURE__*/React__default.createElement(ContextMenu, {
          menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(IconButton, {
            className: "sendbird-openchannel-participant-list__menu",
            width: "32px",
            height: "32px",
            onClick: toggleDropdown
          }, /*#__PURE__*/React__default.createElement(Icon, {
            width: "24px",
            height: "24px",
            type: IconTypes.MORE,
            fillColor: IconColors.CONTENT_INVERSE
          })),
          menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems, {
            parentRef: actionRef,
            closeDropdown: closeDropdown,
            openLeft: true
          }, /*#__PURE__*/React__default.createElement(MenuItem, {
            onClick: () => {
              if (isOperator) {
                channel === null || channel === void 0 ? void 0 : channel.removeOperators([p.userId]).then(() => {
                  closeDropdown();
                  refreshList();
                });
              } else {
                channel === null || channel === void 0 ? void 0 : channel.addOperators([p.userId]).then(() => {
                  closeDropdown();
                  refreshList();
                });
              }
            },
            dataSbId: `open_channel_setting_partitipant_conext_menu_${isOperator ? 'unregister_operator' : 'register_as_operator'}`
          }, isOperator ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR), /*#__PURE__*/React__default.createElement(MenuItem, {
            onClick: () => {
              if (p.isMuted) {
                channel === null || channel === void 0 ? void 0 : channel.unmuteUser(p).then(() => {
                  closeDropdown();
                  refreshList();
                });
              } else {
                channel === null || channel === void 0 ? void 0 : channel.muteUser(p).then(() => {
                  closeDropdown();
                  refreshList();
                });
              }
            },
            dataSbId: `open_channel_setting_partitipant_conext_menu_${p.isMuted ? 'unmute' : 'mute'}`
          }, p.isMuted ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE), /*#__PURE__*/React__default.createElement(MenuItem, {
            onClick: () => {
              channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(() => {
                closeDropdown();
                refreshList();
              });
            },
            dataSbId: "open_channel_setting_partitipant_conext_menu_ban"
          }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))
        }) : null;
      }
    });
  }), participants && participants.length === 0 ? /*#__PURE__*/React__default.createElement(Label, {
    className: "sendbird-channel-settings__empty-list",
    type: LabelTypography.SUBTITLE_2,
    color: LabelColors.ONBACKGROUND_3
  }, stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST) : null, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-openchannel-participant-list__footer"
  }, (participantListQuery === null || participantListQuery === void 0 ? void 0 : participantListQuery.hasNext) && /*#__PURE__*/React__default.createElement(Button, {
    type: ButtonTypes.SECONDARY,
    size: ButtonSizes.SMALL,
    onClick: () => setShowParticipantsModal(true)
  }, stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE)), showParticipantsModal && /*#__PURE__*/React__default.createElement(ParticipantsModal, {
    onCancel: () => {
      setShowParticipantsModal(false);
      refreshList();
    }
  })));
}

export { ParticipantList as P, UserListItem as U };
//# sourceMappingURL=index-581e7610.js.map
