@messenger-box/slack-ui-mobile 10.0.3-alpha.27 → 10.0.3-alpha.31

package/lib/screens/Search/SearchAddChannel.js

@@ -1,24 +1,5 @@
-import React__default,{useState,useEffect,useCallback}from'react';import {HStack,Box,Avatar,AvatarFallbackText,AvatarImage,AvatarBadge,Text,Checkbox,CheckboxIndicator,CheckboxIcon,CheckIcon}from'@admin-layout/gluestack-ui-mobile';import {Keyboard,TouchableOpacity,Dimensions}from'react-native';import {RoomType}from'common';import {useGetChannelsByUserLazyQuery,useGetOrganizationMembersWithChannelsQuery}from'common/graphql';import {DialogMessages}from'@messenger-box/platform-mobile';import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import {userSelector}from'@adminide-stack/user-auth0-client';import {useSelector}from'react-redux';import {startCase,uniqBy}from'lodash-es';import {MaterialIcons,Octicons}from'@expo/vector-icons';import'expo-font';import'expo-splash-screen';import {useDrawerLayout}from'../../hooks/useDrawerLayout.js';import'../../hooks/useExpoNotificationProvider.js';import'@react-navigation/core';import'../../components/Header/styles.js';import'../../components/Tiles/styles.js';import'../../components/CustomDrawer/CustomDrawer.js';import'../../components/CustomBottomTabs/CustomBottomTabs.js';import'../../components/NavigationHeader/NavigationHeader.js';import'@react-navigation/elements';import'@common-stack/client-react';import'../../components/NavigationHeader/InboxNavigationHeader.js';import {LoadingSpinnerDefault}from'../../components/LoadingSpinner/index.js';import'../../components/WorkSpaceDrawer/WorkSpaceDrawer.js';import'../../components/Channels/ChannelsByAlphabeticalAccordion.js';import {SlackInput}from'../../components/SlackSearchInput/index.js';import'../../components/Actionsheet.js';var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const windowWidth = Dimensions.get("window").width;
-const windowHeight = Dimensions.get("window").height;
+import React__default,{useState,useEffect,useRef}from'react';import {Box,HStack,Text,ScrollView,Avatar,AvatarImage,AvatarFallbackText,AvatarBadge}from'@admin-layout/gluestack-ui-mobile';import {Keyboard,TouchableOpacity,SafeAreaView,StyleSheet,View,TextInput,Dimensions}from'react-native';import {RoomType}from'common';import {useGetChannelsByUserLazyQuery,useGetOrganizationMembersWithChannelsQuery}from'common/graphql';import {MaterialIcons,Feather,SimpleLineIcons,Octicons}from'@expo/vector-icons';import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import {userSelector}from'@adminide-stack/user-auth0-client';import {useSelector}from'react-redux';import {startCase,uniqBy}from'lodash-es';import'expo-font';import'expo-splash-screen';import {useDrawerLayout}from'../../hooks/useDrawerLayout.js';import'../../hooks/useExpoNotificationProvider.js';Dimensions.get("window").width;
+Dimensions.get("window").height;
 Dimensions.get("screen").height;
 const defaultChannelType = [RoomType.Channel, RoomType.Private, RoomType.Public, RoomType.Direct];
 const orgMemersDataFetchLimit = 10;
@@ -42,7 +23,6 @@ const useKeyboard = () => {
   return keyboardHeight;
 };
 const SearchAddChannel = (props) => {
-  var _a, _b;
   const navigation = useNavigation();
   const {
     orgName,
@@ -52,18 +32,14 @@ const SearchAddChannel = (props) => {
   const user = useSelector(userSelector);
   const [channels, setChannels] = useState([]);
   const [initialOrgMembers, setInitialOrgMembers] = useState([]);
-  const [selectedMembers, setSelectedMembers] = useState([]);
-  const [selectedChannels, setSelectedChannels] = useState([]);
-  const [showChannels, setShowChannels] = useState(false);
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [searchText, setSearchText] = useState("");
   const [offset, setOffset] = useState(0);
-  const [organizationMembers, setOrganizationMembers] = useState([]);
-  const [totalMembers, setTotalMembers] = useState(0);
   const [channelId, setChannelId] = useState(null);
-  const [isSetInputFocusOut, setInputFocusOut] = useState(false);
   const [isCreateNewChannel, setIsCreateNewChannel] = useState(false);
   useKeyboard();
+  const inputRef = useRef(null);
   const [tags, setTags] = useState([]);
-  const labelExtractor = (tag) => (tag == null ? void 0 : tag.id) ? tag == null ? void 0 : tag.id : tag == null ? void 0 : tag.userId;
   const [getChannelByUser, {
     loading: isChannelByUserLoading
   }] = useGetChannelsByUserLazyQuery();
@@ -106,31 +82,31 @@ const SearchAddChannel = (props) => {
     });
   }, []);
   React__default.useEffect(() => {
-    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     if (data == null ? void 0 : data.channelsByUser) {
-      const allChannels = (_d = (_c = (_b2 = (_a2 = data == null ? void 0 : data.channelsByUser) == null ? void 0 : _a2.filter((ch) => {
-        var _a3, _b3, _c2;
-        return ch.type == RoomType.Direct && ((_a3 = ch == null ? void 0 : ch.members) == null ? void 0 : _a3.length) == 1 && ((_b3 = ch == null ? void 0 : ch.members) == null ? void 0 : _b3.filter((ch2) => {
-          var _a4;
-          return ((_a4 = ch2 == null ? void 0 : ch2.user) == null ? void 0 : _a4.id) == (user == null ? void 0 : user.id);
+      const allChannels = (_d = (_c = (_b = (_a = data == null ? void 0 : data.channelsByUser) == null ? void 0 : _a.filter((ch) => {
+        var _a2, _b2, _c2;
+        return ch.type == RoomType.Direct && ((_a2 = ch == null ? void 0 : ch.members) == null ? void 0 : _a2.length) == 1 && ((_b2 = ch == null ? void 0 : ch.members) == null ? void 0 : _b2.filter((ch2) => {
+          var _a3;
+          return ((_a3 = ch2 == null ? void 0 : ch2.user) == null ? void 0 : _a3.id) == (user == null ? void 0 : user.id);
         })) ? ch : (_c2 = ch == null ? void 0 : ch.members) == null ? void 0 : _c2.filter((m) => {
-          var _a4;
-          return ((_a4 = m == null ? void 0 : m.user) == null ? void 0 : _a4.id) != (user == null ? void 0 : user.id);
+          var _a3;
+          return ((_a3 = m == null ? void 0 : m.user) == null ? void 0 : _a3.id) != (user == null ? void 0 : user.id);
         });
-      })) == null ? void 0 : _b2.map((i) => {
-        var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+      })) == null ? void 0 : _b.map((i) => {
+        var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
         const ch = {
           id: i == null ? void 0 : i.id,
           title: i == null ? void 0 : i.title,
           type: i == null ? void 0 : i.type
         };
-        const channelMembers = (_c2 = (_b3 = (_a3 = i.members) == null ? void 0 : _a3.map((m) => m == null ? void 0 : m.user)) == null ? void 0 : _b3.filter((ch2) => {
-          var _a4;
-          return ((_a4 = i.members) == null ? void 0 : _a4.length) == 1 && (ch2 == null ? void 0 : ch2.id) == (user == null ? void 0 : user.id) ? ch2 : (ch2 == null ? void 0 : ch2.id) != (user == null ? void 0 : user.id);
+        const channelMembers = (_c2 = (_b2 = (_a2 = i.members) == null ? void 0 : _a2.map((m) => m == null ? void 0 : m.user)) == null ? void 0 : _b2.filter((ch2) => {
+          var _a3;
+          return ((_a3 = i.members) == null ? void 0 : _a3.length) == 1 && (ch2 == null ? void 0 : ch2.id) == (user == null ? void 0 : user.id) ? ch2 : (ch2 == null ? void 0 : ch2.id) != (user == null ? void 0 : user.id);
         })) != null ? _c2 : null;
         const title = ch.type == RoomType.Direct ? (_f2 = (_e2 = (_d2 = channelMembers == null ? void 0 : channelMembers.map((u) => {
-          var _a4;
-          return (u == null ? void 0 : u.givenName) + " " + ((_a4 = u == null ? void 0 : u.familyName) != null ? _a4 : "");
+          var _a3;
+          return (u == null ? void 0 : u.givenName) + " " + ((_a3 = u == null ? void 0 : u.familyName) != null ? _a3 : "");
         })) == null ? void 0 : _d2.filter((mu) => mu)) == null ? void 0 : _e2.join(", ")) != null ? _f2 : "" : ch.title;
         ch.title = title;
         ch.channelImage = (_g2 = channelMembers[0]) == null ? void 0 : _g2.picture;
@@ -142,20 +118,20 @@ const SearchAddChannel = (props) => {
         return ch;
       })) == null ? void 0 : _c.filter((ch) => ch)) != null ? _d : [];
       const existingDirectChannelsToDelete = new Set((_f = (_e = data == null ? void 0 : data.channelsByUser) == null ? void 0 : _e.map((ch) => {
-        var _a3;
-        return (_a3 = ch == null ? void 0 : ch.members) == null ? void 0 : _a3.map((m) => {
-          var _a4;
-          return (_a4 = m == null ? void 0 : m.user) == null ? void 0 : _a4.id;
+        var _a2;
+        return (_a2 = ch == null ? void 0 : ch.members) == null ? void 0 : _a2.map((m) => {
+          var _a3;
+          return (_a3 = m == null ? void 0 : m.user) == null ? void 0 : _a3.id;
         });
       })) == null ? void 0 : _f.flat(1));
       const allOrgMembers = (_k = (_j = (_i = (_h = (_g = data == null ? void 0 : data.getOrganizationMembers) == null ? void 0 : _g.data) == null ? void 0 : _h.filter((m) => {
-        var _a3;
-        return ((_a3 = m == null ? void 0 : m.user) == null ? void 0 : _a3.id) != (user == null ? void 0 : user.id);
+        var _a2;
+        return ((_a2 = m == null ? void 0 : m.user) == null ? void 0 : _a2.id) != (user == null ? void 0 : user.id);
       }).filter((obj) => !existingDirectChannelsToDelete.has(obj == null ? void 0 : obj.userId))) == null ? void 0 : _i.map((i) => {
-        var _a3, _b3, _c2, _d2, _e2, _f2;
+        var _a2, _b2, _c2, _d2, _e2, _f2;
         const ch = {
           id: null,
-          title: ((_a3 = i == null ? void 0 : i.user) == null ? void 0 : _a3.givenName) + " " + ((_b3 = i == null ? void 0 : i.user) == null ? void 0 : _b3.familyName),
+          title: ((_a2 = i == null ? void 0 : i.user) == null ? void 0 : _a2.givenName) + " " + ((_b2 = i == null ? void 0 : i.user) == null ? void 0 : _b2.familyName),
           type: RoomType.Direct,
           channelImage: (_c2 = i == null ? void 0 : i.user) == null ? void 0 : _c2.picture,
           imageAcronym: startCase((_e2 = (_d2 = i == null ? void 0 : i.user) == null ? void 0 : _d2.username) == null ? void 0 : _e2.charAt(0)),
@@ -177,20 +153,20 @@ const SearchAddChannel = (props) => {
     }
   }, [data]);
   React__default.useEffect(() => {
-    var _a2;
+    var _a;
     if (channelId && (tags == null ? void 0 : tags.length) === 0)
       setChannelId(null);
     if (!channelId && (tags == null ? void 0 : tags.length) > 0) {
-      const userIds = [...new Set((_a2 = tags == null ? void 0 : tags.map((t) => {
-        var _a3;
-        return (t == null ? void 0 : t.userId) ? t == null ? void 0 : t.userId : (_a3 = t == null ? void 0 : t.members) == null ? void 0 : _a3.map((m) => m == null ? void 0 : m.id);
-      })) == null ? void 0 : _a2.flat(1))];
+      const userIds = [...new Set((_a = tags == null ? void 0 : tags.map((t) => {
+        var _a2;
+        return (t == null ? void 0 : t.userId) ? t == null ? void 0 : t.userId : (_a2 = t == null ? void 0 : t.members) == null ? void 0 : _a2.map((m) => m == null ? void 0 : m.id);
+      })) == null ? void 0 : _a.flat(1))];
       getChannelId(userIds);
     }
     console.log("channelid", channelId, " tags?.length", tags == null ? void 0 : tags.length);
   }, [channelId, tags, orgName]);
   const getChannelId = React__default.useCallback(async (userIds) => {
-    var _a2, _b2, _c, _d, _e;
+    var _a, _b, _c, _d, _e;
     const res = await getChannelByUser({
       variables: {
         criteria: {
@@ -203,160 +179,226 @@ const SearchAddChannel = (props) => {
         limit: 1
       }
     });
-    if (((_b2 = (_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.channelsByUser) == null ? void 0 : _b2.length) > 0) {
+    if (((_b = (_a = res == null ? void 0 : res.data) == null ? void 0 : _a.channelsByUser) == null ? void 0 : _b.length) > 0) {
       setChannelId((_e = (_d = (_c = res == null ? void 0 : res.data) == null ? void 0 : _c.channelsByUser) == null ? void 0 : _d[0]) == null ? void 0 : _e.id);
-      setInputFocusOut(true);
       setIsCreateNewChannel(false);
     } else {
       setChannelId(null);
-      setInputFocusOut(false);
       setIsCreateNewChannel(true);
     }
   }, [orgName, user]);
-  React__default.useCallback((item) => {
-    openInbox(item);
-    if (selectedChannels) {
-      const findIndex = selectedChannels.findIndex((ch) => (ch == null ? void 0 : ch.id) == (item == null ? void 0 : item.id) && (ch == null ? void 0 : ch.userId) == (item == null ? void 0 : item.userId));
-      const selectedChannelValue = findIndex === -1 ? [...selectedChannels, {
-        id: item == null ? void 0 : item.id,
-        userId: item == null ? void 0 : item.userId
-      }] : selectedChannels == null ? void 0 : selectedChannels.filter((ch) => (item == null ? void 0 : item.isOrgMembers) ? (ch == null ? void 0 : ch.userId) !== (item == null ? void 0 : item.userId) : (ch == null ? void 0 : ch.id) !== (item == null ? void 0 : item.id));
-      setSelectedChannels(selectedChannelValue);
-    }
-  }, [selectedChannels]);
-  const openInbox = React__default.useCallback((item) => {
-  }, [orgName]);
-  const renderChannelSuggestions = useCallback((item, onPress, index) => {
-    var _a2, _b2, _c, _d;
-    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { key: `channel-suggestions-${index}`, style: {
-      marginVertical: 10
-    }, onPress: () => onPress(item) }, /* @__PURE__ */ React__default.createElement(HStack, { className: "flex-1 bg-white items-center justify-between" }, /* @__PURE__ */ React__default.createElement(HStack, { className: "flex-1 items-center", space: "sm" }, /* @__PURE__ */ React__default.createElement(Box, { className: "m-0 p-0" }, item.type == RoomType.Direct ? /* @__PURE__ */ React__default.createElement(Avatar, { size: "sm", className: "bg-transparent" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, item == null ? void 0 : item.imageAcronym), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", style: {
-      borderRadius: 6,
-      borderWidth: 2,
-      borderColor: "#fff"
-    }, source: {
-      uri: item == null ? void 0 : item.channelImage
-    } }), (item == null ? void 0 : item.totalMembers) > 1 ? /* @__PURE__ */ React__default.createElement(AvatarBadge, { style: {
-      width: 20,
-      height: 20
-    }, className: "right-[-1px] bottom-[-1px] items-center bg-[#211627] rounded-md" }, /* @__PURE__ */ React__default.createElement(Text, { style: {
-      fontSize: 12,
-      fontWeight: "bold",
-      color: "#fff"
-    } }, item == null ? void 0 : item.totalMembers)) : /* @__PURE__ */ React__default.createElement(AvatarBadge, { style: {
-      width: 10,
-      height: 10
-    }, className: "bg-green-800" })) : item.type == RoomType.Private ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Octicons, { color: "black", name: "lock", size: 20 })) : /* @__PURE__ */ React__default.createElement(Octicons, { color: "black", name: "hash", size: 20 })), /* @__PURE__ */ React__default.createElement(Text, { className: "text-gray-800 font-bold" }, item.title)), /* @__PURE__ */ React__default.createElement(Checkbox, { value: item == null ? void 0 : item.id, isChecked: selectedChannels && ((_a2 = selectedChannels == null ? void 0 : selectedChannels.filter((ch) => (ch == null ? void 0 : ch.id) === (item == null ? void 0 : item.id) && (ch == null ? void 0 : ch.userId) === (item == null ? void 0 : item.userId))) == null ? void 0 : _a2.length) > 0 ? true : false, accessibilityLabel: (_b2 = item.title) != null ? _b2 : "", "aria-label": (_c = item.title) != null ? _c : "", "aria-labelledby": (_d = item.title) != null ? _d : "", className: "border-gray-600" }, /* @__PURE__ */ React__default.createElement(CheckboxIndicator, null, /* @__PURE__ */ React__default.createElement(CheckboxIcon, { as: CheckIcon })))));
-  }, []);
-  const onSuggestionPress = useCallback((item) => {
-    var _a2, _b2;
-    if (tags) {
-      const findIndex = tags == null ? void 0 : tags.findIndex((ch) => (ch == null ? void 0 : ch.id) == (item == null ? void 0 : item.id) && (ch == null ? void 0 : ch.userId) == (item == null ? void 0 : item.userId));
-      if (findIndex === -1) {
-        if ((item == null ? void 0 : item.id) && (item == null ? void 0 : item.type) !== RoomType.Direct) {
-          setChannelId(item == null ? void 0 : item.id);
-          setInputFocusOut(true);
-          setTags([item]);
-        } else {
-          const previousTags = (_a2 = tags == null ? void 0 : tags.filter((t) => (t == null ? void 0 : t.type) === (item == null ? void 0 : item.type))) != null ? _a2 : [];
-          const currentTags = [...previousTags != null ? previousTags : [], item];
-          setTags(currentTags);
-          const userIds = [...new Set((_b2 = currentTags == null ? void 0 : currentTags.map((t) => {
-            var _a3;
-            return (t == null ? void 0 : t.userId) ? t == null ? void 0 : t.userId : (_a3 = t == null ? void 0 : t.members) == null ? void 0 : _a3.map((m) => m == null ? void 0 : m.id);
-          })) == null ? void 0 : _b2.flat(1))];
-          getChannelId(userIds);
-        }
-      }
-    }
-  }, [tags, orgName]);
-  const onTagPress = useCallback((item) => {
-    if (tags) {
-      const filteredValue = tags == null ? void 0 : tags.filter((ch) => (item == null ? void 0 : item.isOrgMembers) ? (ch == null ? void 0 : ch.userId) !== (item == null ? void 0 : item.userId) : (ch == null ? void 0 : ch.id) !== (item == null ? void 0 : item.id));
-      setTags(filteredValue);
-      console.log("tagpress");
+  const toggleItemSelection = (item) => {
+    const itemExists = selectedItems.some((selectedItem) => selectedItem.id && selectedItem.id === item.id || selectedItem.userId && selectedItem.userId === item.userId);
+    if (itemExists) {
+      setSelectedItems(selectedItems.filter((selectedItem) => !(selectedItem.id && selectedItem.id === item.id || selectedItem.userId && selectedItem.userId === item.userId)));
+    } else {
+      setSelectedItems([...selectedItems, item]);
     }
-  }, [tags]);
-  const renderTagItemImage = useCallback((type, image, imageAcronym) => {
-    return /* @__PURE__ */ React__default.createElement(Box, { className: "m-0 p-0" }, type == RoomType.Direct ? /* @__PURE__ */ React__default.createElement(Avatar, { size: "sm", className: "bg-transparent rounded-[6px]" }, /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", style: {
-      borderRadius: 6,
-      borderWidth: 2,
-      borderColor: "#fff"
-    }, source: {
-      uri: image
-    } }), /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, imageAcronym)) : type == RoomType.Private ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Octicons, { color: "black", name: "lock", size: 20 })) : /* @__PURE__ */ React__default.createElement(Octicons, { color: "black", name: "hash", size: 20 }));
-  }, []);
-  const renderTagItem = useCallback((title, type, image, imageAcronym, key) => {
-    return /* @__PURE__ */ React__default.createElement(HStack, { className: "items-center py-2", space: "sm", key: `render-tag-items-${key}` }, renderTagItemImage(type, image, imageAcronym), /* @__PURE__ */ React__default.createElement(Box, { className: "bg-blue-100" }, /* @__PURE__ */ React__default.createElement(Text, { className: "text-gray-800 text-center font-bold", bold: true }, title)));
-  }, []);
-  const renderTag = useCallback((item, onPress, index) => {
-    var _a2;
-    return /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => onPress(item), key: `channel-tags-${index}` }, item.isOrgMembers || (item == null ? void 0 : item.type) != RoomType.Direct ? /* @__PURE__ */ React__default.createElement(Box, { className: "mx-1" }, renderTagItem(item == null ? void 0 : item.title, item == null ? void 0 : item.type, item == null ? void 0 : item.channelImage, item == null ? void 0 : item.imageAcronym, index)) : /* @__PURE__ */ React__default.createElement(HStack, { className: "items-center py-1", space: "sm" }, (_a2 = item == null ? void 0 : item.members) == null ? void 0 : _a2.map((m, i) => {
-      var _a3;
-      const title = (item == null ? void 0 : item.type) == RoomType.Direct ? (m == null ? void 0 : m.givenName) + " " + (m == null ? void 0 : m.familyName) : item.title;
-      const acronym = startCase((_a3 = m == null ? void 0 : m.username) == null ? void 0 : _a3.charAt(0));
-      return renderTagItem(title, item == null ? void 0 : item.type, m == null ? void 0 : m.picture, acronym, i);
-    })));
-  }, []);
-  return /* @__PURE__ */ React__default.createElement(Box, { className: `flex-1 bg-white w-[${windowWidth}] h-[${windowHeight}]` }, /* @__PURE__ */ React__default.createElement(
-    SlackInput,
-    {
-      tags,
-      suggestions: channels,
-      onChangeTags: setTags,
-      labelExtractor,
-      allowCustomTags: false,
-      isSetInputFocusOut,
-      renderLeftElement: () => /* @__PURE__ */ React__default.createElement(Text, { className: "pl-4 pr-1 text-[15px]" }, "To:"),
-      tagContainerStyle: {
-        borderBottomWidth: 1,
-        borderColor: "#D3D3D3",
-        paddingVertical: 5
-      },
-      inputProps: {
-        placeholder: "Search for a channel or conversation",
-        placeholderTextColor: "#404040",
-        autoCapitalize: "none",
-        autoCorrect: false
-      },
-      inputStyle: {
-        fontSize: 15,
-        height: 30
-      },
-      flatListGluestackUiProps: {
-        flex: 1,
-        pb: "$10",
-        contentContainerStyle: {
-          flex: 1,
-          marginBottom: 100,
-          backgroundColor: "white",
-          paddingHorizontal: 10
-        }
-      },
-      flatListStyle: {
-        maxHeight: "100%",
-        maxWidth: "100%"
-      },
-      renderSuggestion: renderChannelSuggestions,
-      filterSuggestions: (text) => {
-        if (!text || text === "") {
-          return [];
-        }
-        return channels == null ? void 0 : channels.filter((item) => {
-          var _a2, _b2;
-          return (_b2 = (_a2 = item == null ? void 0 : item.title) == null ? void 0 : _a2.toLowerCase()) == null ? void 0 : _b2.includes(text == null ? void 0 : text.toLowerCase());
-        });
-      },
-      onSuggestionPress,
-      renderTag,
-      onTagPress
+  };
+  const isItemSelected = (item) => {
+    return selectedItems.some((selectedItem) => selectedItem.id && selectedItem.id === item.id || selectedItem.userId && selectedItem.userId === item.userId);
+  };
+  const renderSelectedItemChip = (item, index) => {
+    return /* @__PURE__ */ React__default.createElement(View, { key: index, style: styles.chipContainer }, /* @__PURE__ */ React__default.createElement(Avatar, { size: "xs", style: styles.chipAvatar }, item.channelImage ? /* @__PURE__ */ React__default.createElement(AvatarImage, { source: {
+      uri: item.channelImage
+    }, alt: item.title }) : /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, item.imageAcronym || item.title.charAt(0))), /* @__PURE__ */ React__default.createElement(Text, { style: styles.chipText }, item.title));
+  };
+  const renderListItem = (item, index) => {
+    if (item.type === "header") {
+      return /* @__PURE__ */ React__default.createElement(HStack, { key: index, style: styles.sectionHeader }, /* @__PURE__ */ React__default.createElement(SimpleLineIcons, { name: "bell", size: 16, color: "#2563EB" }), /* @__PURE__ */ React__default.createElement(Text, { style: styles.sectionHeaderText }, item.title));
     }
-  ), /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1" }, isChannelByUserLoading ? /* @__PURE__ */ React__default.createElement(LoadingSpinnerDefault, null) : /* @__PURE__ */ React__default.createElement(DialogMessages, __spreadProps(__spreadValues({}, props), { channelId, isCreateNewChannel, newChannelData: {
-    type: (_a = RoomType) == null ? void 0 : _a.Direct,
-    userIds: [...new Set((_b = tags == null ? void 0 : tags.map((t) => {
-      var _a2;
-      return (t == null ? void 0 : t.userId) ? t == null ? void 0 : t.userId : (_a2 = t == null ? void 0 : t.members) == null ? void 0 : _a2.map((m) => m == null ? void 0 : m.id);
-    })) == null ? void 0 : _b.flat(1))]
-  } }))));
+    return /* @__PURE__ */ React__default.createElement(HStack, { key: index, style: styles.listItem }, /* @__PURE__ */ React__default.createElement(HStack, { style: styles.listItemLeft }, item.type == RoomType.Channel && /* @__PURE__ */ React__default.createElement(View, { style: styles.iconContainer }, /* @__PURE__ */ React__default.createElement(Octicons, { name: "hash", size: 20, color: "#000" })), item.type == RoomType.Private && /* @__PURE__ */ React__default.createElement(View, { style: styles.iconContainer }, /* @__PURE__ */ React__default.createElement(Octicons, { name: "lock", size: 20, color: "#000" })), item.type == RoomType.Direct && /* @__PURE__ */ React__default.createElement(Avatar, { size: "sm", style: styles.userAvatar }, item.channelImage ? /* @__PURE__ */ React__default.createElement(AvatarImage, { source: {
+      uri: item.channelImage
+    }, alt: item.title }) : /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, item.title.charAt(0)), /* @__PURE__ */ React__default.createElement(AvatarBadge, { style: styles.onlineBadge })), /* @__PURE__ */ React__default.createElement(HStack, { style: styles.titleContainer }, /* @__PURE__ */ React__default.createElement(Text, { style: styles.itemTitle }, item.title), item.type === "app" && /* @__PURE__ */ React__default.createElement(View, { style: styles.appLabel }, /* @__PURE__ */ React__default.createElement(Text, { style: styles.appLabelText }, "APP")))), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => toggleItemSelection(item) }, isItemSelected(item) ? /* @__PURE__ */ React__default.createElement(View, { style: styles.checkedBox }, /* @__PURE__ */ React__default.createElement(Feather, { name: "check", size: 18, color: "#fff" })) : /* @__PURE__ */ React__default.createElement(View, { style: styles.uncheckedBox })));
+  };
+  const listData = [{
+    id: "header1",
+    type: "header",
+    title: "Message with external people"
+  }, ...channels];
+  const filteredData = searchText.trim() ? listData.filter((item) => item.type !== "header" && item.title.toLowerCase().includes(searchText.toLowerCase())) : listData;
+  return /* @__PURE__ */ React__default.createElement(SafeAreaView, { style: {
+    flex: 1,
+    backgroundColor: "#fff"
+  } }, /* @__PURE__ */ React__default.createElement(Box, { style: styles.container }, /* @__PURE__ */ React__default.createElement(HStack, { style: styles.searchContainer }, /* @__PURE__ */ React__default.createElement(Text, { style: styles.toLabel }, "To:"), /* @__PURE__ */ React__default.createElement(View, { style: styles.chipContainerWrapper }, /* @__PURE__ */ React__default.createElement(View, { style: styles.chipWrapView }, selectedItems.map(renderSelectedItemChip), /* @__PURE__ */ React__default.createElement(TextInput, { ref: inputRef, style: styles.searchInput, placeholder: selectedItems.length ? "" : "Search for a channel or conversation", placeholderTextColor: "#9CA3AF", value: searchText, onChangeText: setSearchText })))), /* @__PURE__ */ React__default.createElement(ScrollView, { style: styles.listContainer }, filteredData.map(renderListItem)), /* @__PURE__ */ React__default.createElement(HStack, { style: styles.messageInputContainer }, /* @__PURE__ */ React__default.createElement(TextInput, { style: styles.messageInput, placeholder: `Message ${selectedItems.map((item) => item.title).join(", ")}`, placeholderTextColor: "#9CA3AF" }), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { style: styles.sendButton }, /* @__PURE__ */ React__default.createElement(Feather, { name: "arrow-right", size: 22, color: "#fff" })))));
 };
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#E5E5E5"
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: "bold"
+  },
+  searchContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#E5E5E5",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  },
+  toLabel: {
+    fontSize: 16,
+    marginRight: 8,
+    marginTop: 8,
+    color: "#374151"
+  },
+  chipContainerWrapper: {
+    flex: 1
+  },
+  chipWrapView: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  chipScrollView: {
+    flex: 1
+  },
+  chipScrollContent: {
+    alignItems: "center",
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  chipContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#EFF6FF",
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    marginRight: 8,
+    marginBottom: 8
+  },
+  chipAvatar: {
+    width: 20,
+    height: 20,
+    marginRight: 4
+  },
+  chipText: {
+    color: "#1E40AF",
+    fontSize: 14
+  },
+  searchInput: {
+    flex: 1,
+    height: 40,
+    fontSize: 16,
+    minWidth: 100
+  },
+  listContainer: {
+    flex: 1
+  },
+  sectionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 16,
+    paddingBottom: 8
+  },
+  sectionHeaderText: {
+    marginLeft: 8,
+    fontWeight: "bold",
+    fontSize: 16,
+    color: "#374151"
+  },
+  listItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  listItemLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1
+  },
+  iconContainer: {
+    width: 24,
+    height: 24,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12
+  },
+  userAvatar: {
+    marginRight: 12
+  },
+  onlineBadge: {
+    width: 8,
+    height: 8,
+    backgroundColor: "#10B981",
+    borderWidth: 1,
+    borderColor: "#FFFFFF",
+    bottom: 0,
+    right: 0
+  },
+  titleContainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  itemTitle: {
+    fontSize: 16,
+    color: "#1F2937"
+  },
+  appLabel: {
+    backgroundColor: "#E5E5E5",
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    marginLeft: 8
+  },
+  appLabelText: {
+    fontSize: 10,
+    fontWeight: "bold",
+    color: "#4B5563"
+  },
+  uncheckedBox: {
+    width: 22,
+    height: 22,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: "#D1D5DB"
+  },
+  checkedBox: {
+    width: 22,
+    height: 22,
+    borderRadius: 4,
+    backgroundColor: "#2563EB",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  messageInputContainer: {
+    borderTopWidth: 1,
+    borderTopColor: "#E5E5E5",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  messageInput: {
+    flex: 1,
+    height: 40,
+    backgroundColor: "#F9FAFB",
+    borderRadius: 20,
+    paddingHorizontal: 16,
+    marginRight: 12,
+    fontSize: 16
+  },
+  sendButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "#2563EB",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
 var SearchAddChannel$1 = React__default.memo(SearchAddChannel);export{SearchAddChannel$1 as default,useKeyboard};//# sourceMappingURL=SearchAddChannel.js.map