@messenger-box/slack-ui-mobile 10.0.3-alpha.7 → 10.0.3-alpha.74

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/lib/generated/generated.js';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';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,Avatar,AvatarImage,AvatarFallbackText,AvatarBadge}from'@admin-layout/gluestack-ui-mobile';import {Keyboard,TouchableOpacity,Platform,SafeAreaView,StyleSheet,View,TextInput,FlatList,Dimensions}from'react-native';import {RoomType}from'common';import {NavigationRoutes}from'../../constants/routes.js';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,Feather,Octicons}from'@expo/vector-icons';import'expo-font';import'expo-splash-screen';import {useDrawerLayout}from'../../hooks/useDrawerLayout.js';import'../../hooks/useExpoNotificationProvider.js';import'../../hooks/useOptimizedChannelsQueries.js';import {useChannelsLazyQuery,useAddDirectChannelMutation,useAddChannelMutation,useSaveMembersToChannelMutation,useOrganizationMembersWithChannelsQuery}from'../../queries/slackuiQueries.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,37 +32,39 @@ 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();
+  }] = useChannelsLazyQuery();
+  const [addDirectChannel, {
+    loading: isAddingDirectChannel
+  }] = useAddDirectChannelMutation();
+  const [addChannel, {
+    loading: isAddingChannel
+  }] = useAddChannelMutation();
+  const [saveMembersToChannel, {
+    loading: isSavingMembers
+  }] = useSaveMembersToChannelMutation();
+  const [messageText, setMessageText] = useState("");
   const {
     data,
     loading: oLoading,
     error: oError,
     refetch
-  } = useGetOrganizationMembersWithChannelsQuery({
-    variables: {
+  } = useOrganizationMembersWithChannelsQuery(orgName, {
+    channelCriteria: {
       orgName,
-      channelCriteria: {
-        orgName,
-        type: defaultChannelType
-      },
-      offset,
-      limit: orgMemersDataFetchLimit
+      type: defaultChannelType
     },
-    fetchPolicy: "cache-and-network"
+    offset,
+    limit: orgMemersDataFetchLimit
   });
   useFocusEffect(React__default.useCallback(() => {
     refetch({
@@ -95,42 +77,58 @@ const SearchAddChannel = (props) => {
       limit: orgMemersDataFetchLimit
     });
     return () => {
-      setChannels([]);
-      setChannelId(null);
-      setInitialOrgMembers([]);
     };
-  }, [orgName]));
+  }, []));
   React__default.useEffect(() => {
     navigation.setOptions({
-      headerLeft: (props2) => /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => navigation.goBack() }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { size: 20, name: "close", color: "black" }))
+      headerLeft: (props2) => /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => {
+        console.log("canGoBack:", navigation.canGoBack(), "Platform:", Platform.OS);
+        if (Platform.OS === "macos") {
+          navigation.navigate("MainStack", {
+            screen: NavigationRoutes.Home,
+            params: {
+              orgName
+            }
+          });
+        } else if (navigation.canGoBack()) {
+          navigation.goBack();
+        } else {
+          navigation.navigate("MainStack", {
+            screen: NavigationRoutes.Home,
+            params: {
+              orgName
+            }
+          });
+        }
+      } }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { size: 20, name: "close", color: "black" }))
     });
   }, []);
   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 +140,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 +175,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,171 +201,312 @@ 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);
+  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 {
+      if (item.type === RoomType.Channel || item.type === RoomType.Private) {
+        setSelectedItems([item]);
+      } else if (item.type === RoomType.Direct) {
+        const filteredSelectedItems = selectedItems.filter((selectedItem) => selectedItem.type !== RoomType.Channel && selectedItem.type !== RoomType.Private);
+        setSelectedItems([...filteredSelectedItems, item]);
+      } else {
+        setSelectedItems([...selectedItems, item]);
+      }
     }
-  }, [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, { flex: 1, bg: "white", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React__default.createElement(HStack, { flex: 1, alignItems: "center", space: "sm" }, /* @__PURE__ */ React__default.createElement(Box, { m: "$0", p: "$0" }, item.type == RoomType.Direct ? /* @__PURE__ */ React__default.createElement(Avatar, { size: "sm", bg: "transparent" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, item == null ? void 0 : item.imageAcronym), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", size: "md", 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,
-      {
-        right: "-$1",
-        bottom: "-$1",
-        style: {
-          width: 20,
-          height: 20
-        },
-        alignItems: "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
-    }, bg: "$green800" })) : 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, { color: "$coolGray800", fontWeight: "$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 : "", borderColor: "$trueGray600" }, /* @__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]);
+  };
+  const isItemSelected = (item) => {
+    return selectedItems.some((selectedItem) => selectedItem.id && selectedItem.id === item.id || selectedItem.userId && selectedItem.userId === item.userId);
+  };
+  const handleSendMessage = async () => {
+    var _a, _b, _c, _d;
+    if (selectedItems.length === 0)
+      return;
+    try {
+      const selectedChannel = selectedItems[0] || {};
+      if (selectedChannel && Object.keys(selectedChannel).length > 0) {
+        navigation.navigate(NavigationRoutes.DialogMessages, {
+          initialMessage: messageText,
+          channelId: (_a = selectedChannel == null ? void 0 : selectedChannel.id) == null ? void 0 : _a.toString(),
+          title: (_b = selectedChannel == null ? void 0 : selectedChannel.title) == null ? void 0 : _b.toString(),
+          totalMembers: selectedChannel == null ? void 0 : selectedChannel.totalMembers,
+          channelType: selectedChannel == null ? void 0 : selectedChannel.type,
+          orgName,
+          hideTabBar: true
+        });
+        return;
+      }
+      if (channelId) {
+        navigation.navigate(NavigationRoutes.DialogMessages, {
+          channelId,
+          initialMessage: messageText,
+          orgName
+        });
+        return;
+      }
+      if (isCreateNewChannel) {
+        if (selectedItems[0].type === RoomType.Direct || selectedItems.length === 1 && selectedItems[0].isOrgMembers) {
+          const userIds = selectedItems.map((item) => {
+            var _a2, _b2;
+            return item.userId || (((_a2 = item.members) == null ? void 0 : _a2.length) > 0 ? (_b2 = item.members[0]) == null ? void 0 : _b2.id : null);
+          }).filter(Boolean);
+          const result = await addDirectChannel({
+            variables: {
+              receiver: userIds,
+              displayName: "Direct Channel"
+            }
+          });
+          if ((_c = result.data) == null ? void 0 : _c.createDirectChannel) {
+            const newChannelId = result.data.createDirectChannel;
+            navigation.navigate("ChannelInfo", {
+              channelId: newChannelId,
+              initialMessage: messageText,
+              orgName
+            });
+          }
         } 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);
+          const userIds = selectedItems.map((item) => {
+            var _a2, _b2;
+            return item.userId || (((_a2 = item.members) == null ? void 0 : _a2.length) > 0 ? (_b2 = item.members[0]) == null ? void 0 : _b2.id : null);
+          }).filter(Boolean);
+          const result = await addChannel({
+            variables: {
+              name: `${selectedItems[0].title}'s chat`,
+              description: "",
+              type: RoomType.Direct
+            }
+          });
+          if ((_d = result.data) == null ? void 0 : _d.createChannel) {
+            const newChannelId = result.data.createChannel.id;
+            if (userIds.length > 0) {
+              await saveMembersToChannel({
+                variables: {
+                  channelId: newChannelId,
+                  membersIds: userIds
+                }
+              });
+            }
+            navigation.navigate("ChannelInfo", {
+              channelId: newChannelId,
+              initialMessage: messageText,
+              orgName
+            });
+          }
         }
       }
+    } catch (error) {
+      console.error("Error creating channel:", error);
     }
-  }, [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");
-    }
-  }, [tags]);
-  const renderTagItemImage = useCallback((type, image, imageAcronym) => {
-    return /* @__PURE__ */ React__default.createElement(Box, { m: "$0", p: "$0" }, type == RoomType.Direct ? /* @__PURE__ */ React__default.createElement(Avatar, { size: "sm", bg: "transparent", borderRadius: 6 }, /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", size: "md", 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, { alignItems: "center", space: "sm", py: "$2", key: `render-tag-items-${key}` }, renderTagItemImage(type, image, imageAcronym), /* @__PURE__ */ React__default.createElement(Box, { bg: "$lightBlue100" }, /* @__PURE__ */ React__default.createElement(Text, { color: "$coolGray800", textAlign: "center", 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, { 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, { alignItems: "center", space: "sm", py: "$1" }, (_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, { 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, { pl: "$4", pr: "$1", fontSize: 15 }, "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
-    }
-  ), /* @__PURE__ */ React__default.createElement(Box, { 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))]
-  } }))));
+  };
+  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) => {
+    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 = [...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, onChange: (event) => setSearchText(event.nativeEvent.text) })))), /* @__PURE__ */ React__default.createElement(FlatList, { style: styles.listContainer, data: filteredData, renderItem: ({
+    item,
+    index
+  }) => renderListItem(item, index), keyExtractor: (item, index) => {
+    var _a, _b;
+    return ((_a = item.id) == null ? void 0 : _a.toString()) || ((_b = item.userId) == null ? void 0 : _b.toString()) || index.toString();
+  }, showsVerticalScrollIndicator: false }), /* @__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", value: messageText, onChangeText: setMessageText }), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { style: styles.sendButton, onPress: handleSendMessage }, /* @__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