import { useEffect, useState } from "react";
import { MessagePayload, isSupported } from "firebase/messaging";
import { onMessageListener } from "./firebase";

const useFCM = (token: string) => {
  const [messages, setMessages] = useState<MessagePayload | null>(null);

  const getNotificationListener = async () => {
    try {
      const supportedBrowser = await isSupported();
      if (supportedBrowser) {
        // Set up the listener that will update messages state
        onMessageListener((payload) => {
          setMessages(payload);
        });
      }
    } catch (error) {
      console.error('Error setting up notification listener:', error);
    }
  };

  useEffect(() => {
    try {
      if (typeof window !== "undefined" && token) {
        getNotificationListener();
      }
    } catch (error) {
      console.error('Error in useFCM effect:', error);
    }
  }, [token]);

  return { messages, setMessages, getNotificationListener };
};

export default useFCM;