import { collection, doc, onSnapshot, query, writeBatch } from "firebase/firestore";
import { db } from "../../firebase/clientFirebaseApps";

export default function Notifications() {
  const { user } = useUser();
  const [notifications, setNotifications] = useState<P6Notification[]>([]);
  useEffect(() => {
    if (user) {
      const q = query(collection(db, "notifications"));
      const unsubscribe = onSnapshot(q, (querySnapshot) => {
        const ar: P6Notification[] = [];
        querySnapshot.docs.forEach((doc) => {
          ar.push({ id: doc.id, ...doc.data() } as P6Notification);
        });
        setNotifications(ar);
      });

      return () => unsubscribe();
    } else {
      setNotifications([]);
    }
  }, [user]);

  const handleMarkAllRead = async () => {
    // Remove the userId from the userIds array of all notifications
    const batch = writeBatch(db);

    notifications.forEach((notification) => {
      const notificationRef = doc(db, "notifications", notification.id);
      batch.delete(notificationRef);
    });

    await batch.commit();

    // Update the state to remove the notifications that no longer have the userId
    setNotifications([]);
  };
  console.log(notifications)
  return (
    <div className="flex-auto">
      <div className="text-white">
        <div className="mt-5 bg-component text-white">
          <div className="flex items-end px-2.5 pt-5">
            <div className="flex flex-auto text-[24px] leading-7">Notifications</div>
            <div
              style={{ cursor: "pointer" }}
              className="text-[15px] leading-7 text-p6blue"
              onClick={handleMarkAllRead}
            >
              Mark All Read
            </div>
          </div>
          {notifications.map((notification) => (
            <Item key={notification.id} data={notification} />
          ))}
        </div>
      </div>
    </div>
  );
}