"use client";

import { useEffect, useRef } from "react";

/** Telas dos projetos (vitrine e capas): nenhum efeito pode ficar por cima delas. */
const PROJECT_SCREENS = ".ds-reel, .ds-frame, .ds-bframe, .ds-phone";

/** Grão de filme sobre a página. Some enquanto qualquer tela de projeto está à vista (data-over-projects). */
export default function FilmGrain() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const grain = ref.current;
    if (!grain) return;
    let frame = 0;
    const update = () => {
      frame = 0;
      const over = Array.from(document.querySelectorAll(PROJECT_SCREENS)).some(
        (screen) => {
          const rect = screen.getBoundingClientRect();
          return (
            rect.height > 0 && rect.bottom > 0 && rect.top < window.innerHeight
          );
        },
      );
      if (over) grain.dataset.overProjects = "";
      else delete grain.dataset.overProjects;
    };
    const queue = () => {
      if (!frame) frame = requestAnimationFrame(update);
    };
    update();
    window.addEventListener("scroll", queue, { passive: true });
    window.addEventListener("resize", queue);
    return () => {
      cancelAnimationFrame(frame);
      window.removeEventListener("scroll", queue);
      window.removeEventListener("resize", queue);
    };
  }, []);

  return <div ref={ref} aria-hidden="true" className="film-grain" />;
}