1 files changed, 100 insertions, 2 deletions
diff --git a/src/screens/moments/TagSelection.tsx b/src/screens/moments/TagSelection.tsx
index fe88bc90..5a1e6ac9 100644
--- a/src/screens/moments/TagSelection.tsx
+++ b/src/screens/moments/TagSelection.tsx
@@ -1,7 +1,105 @@
-import React from 'react';
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
+import {Keyboard, SafeAreaView, StyleSheet} from 'react-native';
+import {FlatList} from 'react-native-gesture-handler';
+import {TaggUserSelectionCell} from '../../components';
+import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
+import {loadSearchResults} from '../../services';
+import {ProfilePreviewType} from '../../types';
+import {loadTaggUserSuggestions, SCREEN_HEIGHT} from '../../utils';
+import {ChatSearchBar} from '../chat';
 
 const TagSelection: React.FC = () => {
-  return <></>;
+  const navigation = useNavigation();
+  const [users, setUsers] = useState<ProfilePreviewType[]>([]);
+  const [selectedUsers, setSelectedUsers] = useState<ProfilePreviewType[]>([]);
+
+  const loadUsers = async () => {
+    const data: ProfilePreviewType[] = await loadTaggUserSuggestions();
+    const filteredData: ProfilePreviewType[] = data.filter((user) => {
+      const index = selectedUsers.findIndex((s) => s.id === user.id);
+      return index === -1;
+    });
+    setUsers([...filteredData, ...selectedUsers]);
+  };
+
+  const getQuerySuggested = async () => {
+    if (query.length > 0) {
+      const searchResults = await loadSearchResults(
+        `${SEARCH_ENDPOINT_MESSAGES}?query=${query}`,
+      );
+      setUsers(searchResults?.users);
+    } else {
+      setUsers([]);
+    }
+  };
+
+  useEffect(() => {
+    loadUsers();
+  }, []);
+
+  const [searching, setSearching] = useState(false);
+  const [query, setQuery] = useState<string>('');
+  const handleFocus = () => {
+    setSearching(true);
+  };
+  const handleBlur = () => {
+    Keyboard.dismiss();
+  };
+  const handleCancel = () => {
+    setQuery('');
+    navigation.goBack();
+  };
+
+  useEffect(() => {
+    if (query.length === 0) {
+      loadUsers();
+    }
+
+    if (!searching) {
+      return;
+    }
+
+    if (query.length < 3) {
+      return;
+    }
+    getQuerySuggested();
+  }, [query]);
+
+  useEffect(() => {
+    console.log('selectedUsers: ', selectedUsers);
+  }, [selectedUsers, users]);
+
+  return (
+    <SafeAreaView style={styles.safeAreaView}>
+      <ChatSearchBar
+        onCancel={handleCancel}
+        onChangeText={setQuery}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        value={query}
+        searching={searching}
+        placeholder={''}
+      />
+      {users && (
+        <FlatList
+          data={users}
+          keyExtractor={(item) => item.id}
+          renderItem={(item) => (
+            <TaggUserSelectionCell
+              item={item.item}
+              selectedUsers={selectedUsers}
+              setSelectedUsers={setSelectedUsers}
+            />
+          )}
+        />
+      )}
+    </SafeAreaView>
+  );
 };
 
 export default TagSelection;
+
+const styles = StyleSheet.create({
+  safeAreaView: {backgroundColor: 'white', height: SCREEN_HEIGHT},
+});