import { useEffect, useRef } from "react";
import { observer } from "mobx-react-lite";
import { state } from "../state";
import { chartRef } from "./chartRef";

export const RenderInfoView = observer(function () {
    const info = state.renderInfo;
    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const el = containerRef.current;
        if (!el) 
return;
        el.appendChild(chartRef.current);
        return () => { el.removeChild(chartRef.current); };
    }, []);

    return <>
        <div className="chart" ref={containerRef} />
        {info != null && (
            <div className="metrics">
                <span>draw: {info.calls}</span>
                <span>tri: {info.triangles}</span>
                <span>shaders: {info.shaders}</span>
                <span>geometries: {info.geometries}</span>
                <span>textures: {info.textures}</span>
            </div>
        )}
    </>;
});