import { useEffect, useState } from "react";
import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys";

import { Perf } from 'r3f-perf';

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 ? <Perf  position="bottom-left" className="scene-performance-stats"/> : null;
}
