import { _ as _objectSpread2 } from '../../_rollupPluginBabelHelpers-4f8ebde4.js';
import React__default, { useState, useContext, useEffect } from 'react';
import { a as LocalizationContext } from '../../LocalizationContext-b2390bf8.js';
import { u as useCreateChannelContext } from '../../CreateChannelProvider-640f4660.js';
import useSendbirdStateContext from '../../useSendbirdStateContext.js';
import Modal from '../../ui/Modal.js';
import { L as Label, b as LabelColors, a as LabelTypography } from '../../index-4372fcec.js';
import { ButtonTypes } from '../../ui/Button.js';
import UserListItem from '../../ui/UserListItem.js';
import '../../stringSet-eefbc798.js';
import '../../index-67135027.js';
import '../../sendbirdSelectors.js';
import '../../topics-f3629ea0.js';
import '../../utils-b53fe532.js';
import '../../withSendbird.js';
import 'react-dom';
import '../../index-896545a0.js';
import '../../ui/Icon.js';
import 'prop-types';
import '../../ui/IconButton.js';
import '../../MediaQueryContext-b4904a2e.js';
import '../../UserProfileContext-d5787c95.js';
import '../../ui/Avatar.js';
import '../../ui/ImageRenderer.js';
import '../../uuid-a79b5ba8.js';
import '../../ui/MutedAvatarOverlay.js';
import '../../ui/Checkbox.js';
import '../../ui/UserProfile.js';
import '../../ui/ContextMenu.js';
import '../../ui/SortByRow.js';
import '../../index-eefb44ba.js';
import '../../utils/message/getOutgoingMessageState.js';

const filterUser = idsToFilter => currentId => idsToFilter === null || idsToFilter === void 0 ? void 0 : idsToFilter.includes(currentId);
const setChannelType = (params, type) => {
  if (type === 'broadcast') {
    // eslint-disable-next-line no-param-reassign
    params.isBroadcast = true;
  }
  if (type === 'supergroup') {
    // eslint-disable-next-line no-param-reassign
    params.isSuper = true;
  }
  return params;
};
const createDefaultUserListQuery = _ref => {
  let {
    sdk,
    userFilledApplicationUserListQuery
  } = _ref;
  if (sdk !== null && sdk !== void 0 && sdk.createApplicationUserListQuery) {
    const params = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery();
    if (userFilledApplicationUserListQuery) {
      Object.keys(userFilledApplicationUserListQuery).forEach(key => {
        params[key] = userFilledApplicationUserListQuery[key];
      });
    }
    return params;
  }
};

const appHeight = () => {
  try {
    const doc = document.documentElement;
    doc.style.setProperty('--sendbird-vh', window.innerHeight * 0.01 + 'px');
  } catch (_unused) {
    //
  }
};
const BUFFER = 50;
const InviteUsers = _ref => {
  var _globalStore$config, _globalStore$stores, _globalStore$stores$s;
  let {
    onCancel,
    userListQuery
  } = _ref;
  const {
    onBeforeCreateChannel,
    onCreateChannel,
    overrideInviteUser,
    createChannel,
    type
  } = useCreateChannelContext();
  const globalStore = useSendbirdStateContext();
  const userId = globalStore === null || globalStore === void 0 ? void 0 : (_globalStore$config = globalStore.config) === null || _globalStore$config === void 0 ? void 0 : _globalStore$config.userId;
  const sdk = globalStore === null || globalStore === void 0 ? void 0 : (_globalStore$stores = globalStore.stores) === null || _globalStore$stores === void 0 ? void 0 : (_globalStore$stores$s = _globalStore$stores.sdkStore) === null || _globalStore$stores$s === void 0 ? void 0 : _globalStore$stores$s.sdk;
  const idsToFilter = [userId];
  const [users, setUsers] = useState([]);
  const [selectedUsers, setSelectedUsers] = useState({});
  const {
    stringSet
  } = useContext(LocalizationContext);
  const [usersDataSource, setUsersDataSource] = useState(null);
  const selectedCount = Object.keys(selectedUsers).length;
  const titleText = stringSet.MODAL__CREATE_CHANNEL__TITLE;
  const submitText = stringSet.BUTTON__CREATE;
  const userQueryCreator = userListQuery ? userListQuery() : createDefaultUserListQuery({
    sdk
  });
  useEffect(() => {
    const applicationUserListQuery = userQueryCreator;
    setUsersDataSource(applicationUserListQuery);
    // @ts-ignore
    if (!(applicationUserListQuery !== null && applicationUserListQuery !== void 0 && applicationUserListQuery.isLoading)) {
      applicationUserListQuery.next().then(users_ => {
        setUsers(users_);
      });
    }
  }, []);

  // https://stackoverflow.com/a/70302463
  // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/#css-custom-properties-the-trick-to-correct-sizing
  // to fix navbar break in mobile
  useEffect(() => {
    appHeight();
    window.addEventListener('resize', appHeight);
    return () => {
      window.removeEventListener('resize', appHeight);
    };
  }, []);
  return /*#__PURE__*/React__default.createElement(Modal, {
    isFullScreenOnMobile: true,
    titleText: titleText,
    submitText: submitText,
    type: ButtonTypes.PRIMARY
    // Disable the create button if no users are selected,
    // but if there's only the logged-in user in the user list,
    // then the create button should be enabled
    ,
    disabled: users.length > 1 && Object.keys(selectedUsers).length === 0,
    onCancel: onCancel,
    onSubmit: () => {
      const selectedUserList = Object.keys(selectedUsers).length > 0 ? Object.keys(selectedUsers) : [userId];
      if (typeof overrideInviteUser === 'function') {
        overrideInviteUser({
          users: selectedUserList,
          onClose: onCancel,
          channelType: type
        });
        return;
      }
      if (onBeforeCreateChannel) {
        const params = onBeforeCreateChannel(selectedUserList);
        setChannelType(params, type);
        createChannel(params).then(channel => {
          onCreateChannel(channel);
        });
      } else {
        const params = {};
        params.invitedUserIds = selectedUserList;
        params.isDistinct = false;
        if (userId) {
          params.operatorUserIds = [userId];
        }
        setChannelType(params, type);
        // do not have custom params
        createChannel(params).then(channel => {
          onCreateChannel(channel);
        });
      }
      onCancel();
    }
  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Label, {
    color: selectedCount > 0 ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3,
    type: LabelTypography.CAPTION_1
  }, `${selectedCount} ${stringSet.MODAL__INVITE_MEMBER__SELECTED}`), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-create-channel--scroll",
    onScroll: e => {
      const eventTarget = e.target;
      const {
        hasNext
      } = usersDataSource;
      const fetchMore = eventTarget.clientHeight + eventTarget.scrollTop + BUFFER > eventTarget.scrollHeight;
      if (hasNext && fetchMore) {
        usersDataSource.next().then(usersBatch => {
          setUsers([...users, ...usersBatch]);
        });
      }
    }
  }, users.map(user => !filterUser(idsToFilter)(user.userId) && /*#__PURE__*/React__default.createElement(UserListItem, {
    key: user.userId,
    user: user,
    checkBox: true,
    checked: selectedUsers[user.userId],
    onChange: event => {
      const modifiedSelectedUsers = _objectSpread2(_objectSpread2({}, selectedUsers), {}, {
        [event.target.id]: event.target.checked
      });
      if (!event.target.checked) {
        delete modifiedSelectedUsers[event.target.id];
      }
      setSelectedUsers(modifiedSelectedUsers);
    }
  })))));
};

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