import {
  addMessageListener,
  getMessageList,
  IMessageListenerCallbackArgs,
  removeMessageListener,
} from '@livelike/javascript';
import { useEffect } from 'react';
import { chatMessageStoreActions } from '../store/chatMessage';
import { useAnalytics } from './useAnalytics';

export function useChatMessagesEffect({ roomId }) {
  const { trackEvent } = useAnalytics();

  useEffect(() => {
    if (!roomId) {
      return;
    }
    getMessageList(roomId).then((res) => {
      chatMessageStoreActions.updateChatMessageStateAction({
        roomId,
        chatMessages: res.messages,
        messageListIterator: res.done ? undefined : res.next,
        chatMessagesLoaded: true,
      });
      trackEvent('Chat Message History Loaded', {
        roomId,
      });
    });
    function onMessage({ event, message }: IMessageListenerCallbackArgs) {
      if (event === 'messagereceived') {
        chatMessageStoreActions.addChatMessageAction({
          roomId,
          chatMessage: message,
        });
        trackEvent('Chat Message Received', { roomId, message });
      }
      if (event === 'messagedeleted') {
        chatMessageStoreActions.deleteChatMessageAction({
          roomId,
          chatMessage: message,
        });
        trackEvent('Chat Message Deleted', {
          roomId,
          message,
        });
      }
    }
    addMessageListener(
      {
        roomId,
      },
      onMessage
    );

    return () => {
      removeMessageListener({ roomId }, onMessage);
    };
  }, [roomId]);
}