"use client";

import { Novu } from "@novu/js";
import { useMemo, useState, useEffect } from "react";
import { env } from "@/env.mjs";

export const HeadlessNotification = () => {
  const [list, setList] = useState<any[]>([]);
  const applicationId = env.NEXT_PUBLIC_NOVU_APPLICATION_IDENTIFIER;
  const memberId = env.NEXT_PUBLIC_SUBSCRIBER_ID;

  const novu = useMemo(() => {
    console.log("applicationId", applicationId);
    return new Novu({
      applicationIdentifier: applicationId,
      subscriberId: memberId,
    });
  }, [applicationId, memberId]);

  const getNovuNotifications = async () => {
    try {
      const { data } = await novu.notifications.list({
        limit: 30,
        useCache: false,
      });

      setList(data?.notifications || []);
      console.log("NOVU-list", data?.notifications);
    } catch (error) {
      console.error("Error fetching notifications:", error);
    }
  };

  useEffect(() => {
    const handleNewNotification = (data: any) => {
      console.log("new notification =>", data);
      getNovuNotifications();
    };

    // Set up event listener
    novu.on("notifications.notification_received", handleNewNotification);

    // Initial fetch
    getNovuNotifications();
  }, [novu]);

  return (
    <div>
      {list.length > 0 ? (
        list.map((item) => (
          <div key={item.id} dangerouslySetInnerHTML={{ __html: item.body }} />
        ))
      ) : (
        <div>No notifications</div>
      )}
    </div>
  );
};

"use client";

import { Novu } from "@novu/js";
import { useMemo, useState, useEffect } from "react";
import { env } from "@/env.mjs";

export const HeadlessNotification = () => {
  const [list, setList] = useState<any[]>([]);
  const applicationId = env.NEXT_PUBLIC_NOVU_APPLICATION_IDENTIFIER;
  const memberId = env.NEXT_PUBLIC_SUBSCRIBER_ID;

  const novu = useMemo(() => {
    console.log("applicationId", applicationId);
    return new Novu({
      applicationIdentifier: applicationId,
      subscriberId: memberId,
    });
  }, [applicationId, memberId]);

  const getNovuNotifications = async () => {
    try {
      const { data } = await novu.notifications.list({
        limit: 30,
        useCache: false,
      });

      setList(data?.notifications || []);
      console.log("NOVU-list", data?.notifications);
    } catch (error) {
      console.error("Error fetching notifications:", error);
    }
  };

  useEffect(() => {
    const handleNewNotification = (data: any) => {
      console.log("new notification =>", data);
      getNovuNotifications();
    };

    // Set up event listener
    novu.on("notifications.notification_received", handleNewNotification);

    // Initial fetch
    getNovuNotifications();
  }, [novu]);

  return (
    <div>
      {list.length > 0 ? (
        list.map((item) => (
          <div key={item.id} dangerouslySetInnerHTML={{ __html: item.body }} />
        ))
      ) : (
        <div>No notifications</div>
      )}
    </div>
  );
};