import {
  KnockFeedProvider,
  NotificationFeedPopover,
  NotificationIconButton,
} from "@knocklabs/react-notification-feed";

import { useState, useRef } from "react";
import { useUser } from "@/hooks/useUser";

const NotificationFeed = () => {
  const [isVisible, setIsVisible] = useState(false);
  const notifButtonRef = useRef(null);

  const { user, isLoading } = useUser();

  return (
    <>
      {!isLoading && user?.edgebrix && (
        <>
          <KnockFeedProvider
            userId={user.edgebrix.user_id}
            apiKey={"pk_test_2omvZJQA1CTbUdXFf2Kg0rdWYHt0keaZIn3Tkeuq8Uc"}
            feedId={"test"}
          >
            <>
              <NotificationIconButton
                ref={notifButtonRef}
                onClick={() => setIsVisible(!isVisible)}
              />
              <NotificationFeedPopover
                buttonRef={notifButtonRef}
                isVisible={isVisible}
                onClose={() => setIsVisible(false)}
              />
            </>
          </KnockFeedProvider>
        </>
      )}
    </>
  );
};

export { NotificationFeed };
