import { FC, useEffect, useState } from "react";
import "./Screensaver.scss";
import screensaverData from "@content/pages/screensaver.json";
import { getMediaPath } from "@/utils/mediaImport";
import { useContentWithTrad } from "@/hooks/useContentWithTrad";
interface ScreensaverProps {
    timeout?: number;
}

export const Screensaver: FC<ScreensaverProps> = ({ timeout = 3000000 }) => {
    const content = useContentWithTrad(screensaverData);
    const [isVisible, setIsVisible] = useState(false);

    const mediaFilePath = getMediaPath(
        `src/assets/images/${content.media_file}`,
        "images"
    );

    useEffect(() => {
        let timer: ReturnType<typeof setTimeout>;

        const resetTimer = () => {
            clearTimeout(timer);
            setIsVisible(false);
            timer = setTimeout(() => setIsVisible(true), timeout);
        };

        // Événements à surveiller
        const events = ["mousemove", "keydown", "touchstart", "mousedown"];

        // Initialiser le timer
        resetTimer();

        // Ajouter les écouteurs d'événements
        events.forEach((event) => {
            window.addEventListener(event, resetTimer);
        });

        // Nettoyer
        return () => {
            clearTimeout(timer);
            events.forEach((event) => {
                window.removeEventListener(event, resetTimer);
            });
        };
    }, [timeout]);

    if (!isVisible) return null;

    return (
        <div className="screensaver">
            <img src={mediaFilePath} alt="screensaver" />
        </div>
    );
};