import { useEffect, useState } from "react";
import { Stats } from "@react-three/drei";
import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys";

export default function StatsHelper() {
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        const handleKeyDown = (event: KeyboardEvent) => {
            const keyCombination = detectModifierKeys(event);
            if (keyCombination === "F1") {
                event.preventDefault();
                setVisible(prev => !prev);
            }
        };

        window.addEventListener("keydown", handleKeyDown);
        return () => window.removeEventListener("keydown", handleKeyDown);
    }, []);

    return visible ? <Stats className="stats" /> : null;
}