import { useEffect, useMemo } from "react";
import StatsJs from "stats.js";

import { useRaf } from "@/hooks";
import { useStore } from "@/store";

export const Stats = () => {
  const showStats = useStore.use.showStats();

  const stats = useMemo(() => {
    if (showStats) {
      return new StatsJs();
    }
    return null;
  }, [showStats]);

  useEffect(() => {
    if (stats) {
      document.body.appendChild(stats.dom);
      return () => {
        document.body.removeChild(stats.dom);
      };
    }
  }, [stats]);

  useRaf(() => {
    stats?.begin();
    stats?.end();
  }, [stats]);

  return null;
};