wavelength_app/app/(tabs)/messages.tsx

import React, { useCallback, useEffect, useReducer, useState } from 'react';
import { ThemedText, ThemedView } from '@/components/theme/Theme';
import { Alert, Linking, Platform, StyleSheet, ActivityIndicator } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import {
  GiftedChat,
  IMessage,
  Send,
  SendProps,
  SystemMessage,
} from 'react-native-gifted-chat';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import CustomActions from '@/components/chat/CustomActions';
import CustomView from '@/components/chat/CustomView';
import * as Clipboard from 'expo-clipboard';
import {
  GCUser,
  GCState,
  GCStateAction,
  ActionKind,
  User,
  Message,
} from '@/constants/Types';
import {getInitialMessages, sendMessage} from '@/constants/APIs';
import { getUser, getPartner } from '@/components/services/SecureStore';

const reducer = (state: GCState, action: GCStateAction) => {
  switch (action.type) {
    case ActionKind.SEND_MESSAGE: {
      return {
        ...state,
        messages: action.payload,
      };
    }
    case ActionKind.LOAD_EARLIER_MESSAGES: {
      return {
        ...state,
        loadEarlier: true,
        isLoadingEarlier: false,
        messages: action.payload,
      };
    }
    case ActionKind.LOAD_EARLIER_START: {
      return {
        ...state,
        isLoadingEarlier: true,
      }
    }
    case ActionKind.SET_IS_TYPING: {
      return {
        ...state,
        isTyping: action.payload,
      }
    }
  }
};

const MessagesScreen = () => {
  const [user, setUser] = useState<User | null>(null);
  const [partner, setPartner] = useState<User | null>(null);
  const [state, dispatch] = useReducer(reducer, {
    messages: [],
    step: 0,
    loadEarlier: true,
    isLoadingEarlier: false,
    isTyping: false,
  });
  const msgUser: GCUser = {
    _id: user?.id || 0,
    name: user?.fullName ?? 'You',
    avatar: user?.pfpUrl ?? require('@/assets/images/default-profile.png'),
  };
  const msgPartner: GCUser = {
    _id: partner?.id || 0,
    name: partner?.fullName ?? 'Your Partner',
    avatar: partner?.pfpUrl ?? require('@/assets/images/default-profile.png'),
  };

  useEffect(() => {
    const initializeUsers = async () => {
      const userData: User = await getUser() as User;
      const partnerData: User = await getPartner() as User;
      if (userData && partnerData) {
        setUser(userData);
        setPartner(partnerData);
        fetchInitialMessages(userData.id);
      }
    };
    initializeUsers();
  }, []);

  const fetchInitialMessages = async (userId: number) => {
    try {
      const initialMessages = await getInitialMessages(userId);
      if (initialMessages) {
        const formattedMessages = formatMessages(initialMessages);
        dispatch({ type: ActionKind.SEND_MESSAGE, payload: formattedMessages });
      }
    } catch (error) {
      console.error('Error fetching initial messages:', error);
    }
  };

  const formatMessages = (dbMessages: Message[]): IMessage[] => {
    if (!user || !partner) return [];
    return dbMessages.map((msg) => ({
      _id: msg.id,
      text: msg.text,
      createdAt: new Date(msg.createdAt),
      user: msg.senderId === user.id ? msgUser : msgPartner,
  })) as IMessage[];
};

  const onSend = useCallback(async (messages: any[]) => {
    if (!user || !partner) return;
    const tempId = Math.round(Math.random() * -1000000);
    try {
      const messageToSend: Message = {
        id: tempId,
        senderId: user.id,
        receiverId: partner?.id ?? 0,
        text: messages[0].text,
        createdAt: new Date(),
        isRead: false,
        hasLocation: false,
        hasMedia: false,
        hasQuickReply: false,
      };
      const tempFormattedMessages = formatMessages([messageToSend]);
      dispatch({
        type: ActionKind.SEND_MESSAGE,
        payload: GiftedChat.append(state.messages, tempFormattedMessages, Platform.OS !== 'web'),
      });
      const sentMessage = await sendMessage(messageToSend);
      if (!sentMessage)
        throw new Error('Message failed to send');
      const updatedMessages = state.messages.map(msg => 
        msg._id === tempId ? {...msg, _id: sentMessage.id} : msg
      ) as IMessage[];
      dispatch({
        type: ActionKind.SEND_MESSAGE,
        payload: updatedMessages,
      });
    } catch (error) {
      console.error('Error sending message:', error);
      const updatedMessages = state.messages.filter(msg => msg._id !== tempId);
      dispatch({
        type: ActionKind.SEND_MESSAGE,
        payload: updatedMessages,
      });
      Alert.alert('Error', 'Failed to send message. Please try again.');
    }
  }, [user, state.messages]);


  const onLoadEarlier = useCallback(async () => {
    if (!user || !partner) return;
    dispatch({ type: ActionKind.LOAD_EARLIER_START });
    try { 
      const earlierMessages = await getInitialMessages(user.id, 20, state.messages.length);
      if (earlierMessages) {
        const formattedMessages = formatMessages(earlierMessages);
        dispatch({
          type: ActionKind.LOAD_EARLIER_MESSAGES,
          payload: GiftedChat.prepend(state.messages, formattedMessages, Platform.OS !== 'web')
        });
      }
    } catch (error) {
      console.error('Error fetching earlier messages:', error);
    }
  }, [dispatch, state.messages]);

  const parsePatterns = useCallback(() => {
    return [
      {
        pattern: /#(\w+)/g,
        style: { textDecorationLine: 'underline', color: 'darkorange' },
        onPress: () => Linking.openURL('https://www.gbrown.org'),
      },
    ]
  }, []);

  const onLongPressAvatar = useCallback((pressedUser: any) => {
    Alert.alert(JSON.stringify(pressedUser))
  }, []);

  const onPressAvatar = useCallback(() => {
    Alert.alert('Pressed avatar!')
  }, []);

  const handleLongPress = useCallback((context: unknown, currentMessage: object) => {
    if (!currentMessage.text) return;
    const options = [
      'Copy text',
      'Cancel',
    ]
    const cancelButtonIndex = options.length - 1;
    (context as any).actionSheet().showActionSheetWithOptions(
      { options, cancelButtonIndex },
      (buttonIndex: number) => {
        switch (buttonIndex) {
          case 0:
            Clipboard.setStringAsync(currentMessage.text);
            break;
          default: break;
        }
      }
    )
  }, []);

  const onQuickReply = useCallback((replies: any[]) => {
    const createdAt = new Date();
    if (replies.length === 1)
      onSend([
        {
          createdAt,
          _id: Math.round(Math.random() * 1000000),
          text: replies[0].title,
          user: msgUser,
        },
      ]);
    else if (replies.length > 1)
      onSend([
        {
          createdAt,
          _id: Math.round(Math.random() * 1000000),
          text: replies.map(reply => reply.title).join(', '),
          user: msgUser,
        },
      ]);
    else console.warn('replies param is not set correctly');
  }, []);

  const renderQuickReplySend = useCallback(() => {
    return <ThemedText>{'custom send =>'}</ThemedText>
  }, []);

  const setIsTyping = useCallback((isTyping: boolean) => {
    dispatch({ type: ActionKind.SET_IS_TYPING, payload: isTyping });
  }, [dispatch]);

  const renderCustomActions = useCallback(
    props =>
      Platform.OS === 'web' ? null : (
        <CustomActions {...props} onSend={onSend} />
      ),
    [onSend]
  );

  const renderSystemMessage = useCallback(props => {
    return (
      <SystemMessage
        {...props}
        containerStyle={{marginBottom: 15}}
        textStyle={{fontSize: 14}}
      />
    );
  }, []);

  const renderCustomView = useCallback(props => {
    return <CustomView {...props} />
  }, []);

  const renderSend = useCallback((props: SendProps<IMessage>) => {
    return (
      <Send
        {...props}
        containerStyle={{justifyContent: 'center', paddingHorizontal: 10}}
      >
        <MaterialIcons size={30} color={'tomato'} name={'send'} />
      </Send>
    );
  }, []);

  if (!user || !partner) return (
    <ActivityIndicator size='large' color='#0000ff'/>
  );

  return (
    <SafeAreaView style={styles.fill}>
      <ThemedView style={styles.fill}>
        <GiftedChat
          messages={state.messages}
          onSend={onSend}
          loadEarlier={state.loadEarlier}
          onLoadEarlier={onLoadEarlier}
          isLoadingEarlier={state.isLoadingEarlier}
          parsePatterns={parsePatterns}
          user={msgUser as GCUser}
          scrollToBottom
          onPressAvatar={onPressAvatar}
          onLongPressAvatar={onLongPressAvatar}
          onLongPress={handleLongPress}
          onQuickReply={onQuickReply}
          quickReplyStyle={{ borderRadius: 2 }}
          quickReplyTextStyle={{
            fontWeight: '200',
          }}
          renderQuickReplySend={renderQuickReplySend}
          renderActions={renderCustomActions}
          renderSystemMessage={renderSystemMessage}
          renderCustomView={renderCustomView}
          renderSend={renderSend}
          keyboardShouldPersistTaps='never'
          timeTextStyle={{
            left: { color: 'red' },
            right: { color: 'yellow' },
          }}
          isTyping={state.isTyping}
          inverted={Platform.OS !== 'web'}
          infiniteScroll
        />
      </ThemedView>
    </SafeAreaView>
  )
};

const ChatWrapper = () => {
  return (
    <SafeAreaProvider>
      <MessagesScreen />
    </SafeAreaProvider>
  );
};

export default ChatWrapper;

const styles = StyleSheet.create({
  fill: {
    flex: 1,
  },
});