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 AccessoryBar from '@/components/chat/AccessoryBar';
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,
  NotificationMessage,
} from '@/constants/Types';
import {getMessages, sendMessage} from '@/constants/APIs';
import { getUser, getPartner } from '@/components/services/SecureStore';
import { sendPushNotification } from '@/components/services/notifications/PushNotificationManager';

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 }
    }
    default: return state;
  }
};

const MessagesScreen = () => {
  const [user, setUser] = useState<User | null>(null);
  const [partner, setPartner] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  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: `${process.env.EXPO_PUBLIC_API_URL}${user?.pfpUrl}` ??
      `${process.env.EXPO_PUBLIC_API_URL}/images/default-profile.png`,
  };
  const msgPartner: GCUser = {
    _id: partner?.id ?? 0,
    name: partner?.fullName ?? 'Your Partner',
    avatar:  `${process.env.EXPO_PUBLIC_API_URL}${partner?.pfpUrl}` ?? 
      `${process.env.EXPO_PUBLIC_API_URL}/images/default-profile.png`,
  };

  useEffect(() => {
    const initialize = async () => {
      try{
        const userData: User = await getUser() as User;
        const partnerData: User = await getPartner() as User;
        if (userData && partnerData) {
          setUser(userData);
          setPartner(partnerData);
          await fetchInitialMessages(userData.id);
        } else
          throw new Error('User or partner not found');
      } catch (error) {
        console.error('Error initializing users:', error);
        Alert.alert('Error', 'Failed to initialize users. Please try again.');
      } finally {
        setLoading(false);
      }
    };
    initialize();
  }, []);

  const fetchInitialMessages = async (userId: number, limit: number = 20, offset: number = 0) => {
    try {
      const initialMessages = await getMessages(userId, limit, offset);
      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;

  // Prepare the message to be sent
  const createdAt = new Date();
  const tempId = Math.round(Math.random() * -1000000); // Temporary ID

  const messageToSend: Message = {
    id: tempId,
    senderId: user.id,
    receiverId: partner?.id ?? 0,
    text: messages[0].text,
    createdAt,
    isRead: false,
    hasLocation: false,
    hasMedia: false,
    hasQuickReply: false,
  };
  const notificationMessage: NotificationMessage = {
    sound: 'default',
    title: 'New message from ' + user.fullName,
    body: messageToSend.text,
    data: {
      message: messageToSend,
    },
  };
  //sendPushNotification(partner.pushToken, notificationMessage);
  sendPushNotification(user.pushToken, notificationMessage);

  // Add the message with a tempId immediately to the state
  const tempFormattedMessages = formatMessages([messageToSend]);
  dispatch({
    type: ActionKind.SEND_MESSAGE,
    payload: GiftedChat.append(state.messages, tempFormattedMessages),
  });

  try {
    // Send the message to the server
    const sentMessage = await sendMessage(messageToSend);

    // Fetch the latest messages from the server to ensure consistency
    const updatedMessages = await getMessages(user?.id ?? 0);
    if (updatedMessages) {
      const formattedMessages = formatMessages(updatedMessages);
      dispatch({ type: ActionKind.SEND_MESSAGE, payload: formattedMessages });
    }
    
  } catch (error) {
    console.error('Error sending message:', error);

    // In case of an error, remove the temporary message from the state
    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, partner, state.messages]);

  const onLoadEarlier = useCallback(async () => {
    if (!user) return;

    // Set loading state
    dispatch({ type: ActionKind.LOAD_EARLIER_START });

    // Fetch the current size of messages already in chat to calculate the new offset
    const offset = state.messages.length;

    try {
      const earlierMessages = await getMessages(user.id, 20, offset);
      if (earlierMessages) {
        const formattedMessages = formatMessages(earlierMessages);

        // Prepend older messages
        dispatch({
          type: ActionKind.LOAD_EARLIER_MESSAGES,
          payload: GiftedChat.prepend(state.messages, formattedMessages),
        });
      }
    } catch (error) {
      console.error('Error loading earlier messages:', error);
    }
  }, [user, 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');
  }, [msgUser, onSend]);

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

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

  const renderAccessory = useCallback(() => {
    return (
      <AccessoryBar
        onSend={onSend}
        isTyping={() => setIsTyping(!state.isTyping)}
      />
    );
  }, [onSend, setIsTyping, state.isTyping]);

  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 (loading) 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}
          scrollToBottom
          onPressAvatar={onPressAvatar}
          onLongPressAvatar={onLongPressAvatar}
          onLongPress={handleLongPress}
          onQuickReply={onQuickReply}
          quickReplyStyle={{ borderRadius: 2 }}
          quickReplyTextStyle={{
            fontWeight: '200',
          }}
          renderQuickReplySend={renderQuickReplySend}
          renderAccessory={renderAccessory}
          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,
  },
});