NewGroupChannelAddMemberScreen.tsx

import React, { useCallback } from 'react';
import { FlatList, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
import { Search, useTheme } from 'stream-chat-react-native';

import { RightArrow } from '../icons/RightArrow';
import { ScreenHeader } from '../components/ScreenHeader';
import { UserGridItem } from '../components/UserSearch/UserGridItem';
import { UserSearchResults } from '../components/UserSearch/UserSearchResults';
import { useAppContext } from '../context/AppContext';
import { useUserSearchContext } from '../context/UserSearchContext';
import { useLegacyColors } from '../theme/useLegacyColors';

import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

import type { StackNavigatorParamList } from '../types';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  flatList: { paddingBottom: 16 },
  inputBox: {
    flex: 1,
    fontSize: 14,
    includeFontPadding: false, // for android vertical text centering
    padding: 0, // removal of default text input padding on android
    paddingHorizontal: 16,
    paddingTop: 0, // removal of iOS top padding for weird centering
    textAlignVertical: 'center', // for android vertical text centering
  },
  inputBoxContainer: {
    alignItems: 'center',
    borderRadius: 18,
    borderWidth: 1,
    flexDirection: 'row',
    marginHorizontal: 8,
    marginTop: 8,
    paddingHorizontal: 10,
    paddingVertical: 8,
  },
  navigationButton: {
    paddingRight: 8,
  },
  userGridItemContainer: { marginHorizontal: 8, width: 64 },
});

type RightArrowButtonProps = {
  disabled?: boolean;
  onPress?: () => void;
};

const RightArrowButton: React.FC<RightArrowButtonProps> = (props) => {
  const { disabled, onPress } = props;

  return (
    <TouchableOpacity disabled={disabled} onPress={onPress} style={styles.navigationButton}>
      <RightArrow height={24} width={24} />
    </TouchableOpacity>
  );
};

export type NewGroupChannelAddMemberScreenNavigationProp = NativeStackNavigationProp<
  StackNavigatorParamList,
  'NewGroupChannelAddMemberScreen'
>;

type Props = {
  navigation: NewGroupChannelAddMemberScreenNavigationProp;
};

export const NewGroupChannelAddMemberScreen: React.FC<Props> = ({ navigation }) => {
  const { chatClient } = useAppContext();

  const {
    theme: { semantics },
  } = useTheme();
  const { black, grey, white } = useLegacyColors();

  const { onChangeSearchText, onFocusInput, removeUser, reset, searchText, selectedUsers } =
    useUserSearchContext();

  const onBackPress = useCallback(() => {
    reset();

    if (!navigation.canGoBack()) {
      navigation.reset({ index: 0, routes: [{ name: 'MessagingScreen' }] });
      return;
    }

    navigation.goBack();
  }, [navigation, reset]);

  const onRightArrowPress = () => {
    if (selectedUsers.length === 0) {
      return;
    }
    navigation.navigate('NewGroupChannelAssignNameScreen');
  };

  if (!chatClient) {
    return null;
  }

  return (
    <View style={styles.container}>
      <ScreenHeader
        onBack={onBackPress}
        // eslint-disable-next-line react/no-unstable-nested-components
        RightContent={() => (
          <RightArrowButton disabled={selectedUsers.length === 0} onPress={onRightArrowPress} />
        )}
        titleText='Add Group Members'
      />
      <View>
        <View
          style={[
            styles.inputBoxContainer,
            {
              backgroundColor: white,
              borderColor: semantics.borderCoreDefault,
              marginBottom: selectedUsers.length === 0 ? 8 : 16,
            },
          ]}
        >
          <Search pathFill={black} />
          <TextInput
            onChangeText={onChangeSearchText}
            onFocus={onFocusInput}
            placeholder='Search'
            placeholderTextColor={grey}
            style={[
              styles.inputBox,
              {
                color: black,
              },
            ]}
            value={searchText}
          />
        </View>
        <FlatList
          data={selectedUsers}
          horizontal
          keyExtractor={(item, index) => `${item.id}-${index}`}
          renderItem={({ index, item: user }) => (
            <View style={styles.userGridItemContainer}>
              <UserGridItem
                onPress={() => {
                  removeUser(index);
                }}
                user={user}
              />
            </View>
          )}
          style={selectedUsers.length ? styles.flatList : {}}
        />
      </View>
      <UserSearchResults />
    </View>
  );
};