import Maid from "@rbxts/maid";
import Roact from "@rbxts/roact";
import Hooks from "@rbxts/roact-hooks";
import { RunService } from "@rbxts/services";
import { Timer } from "shared/class/Timer";
import { viewProps } from "../router/types";
import { STYLE_TEXT_BODY } from "../util/ui_style";

const FpsCounter: Hooks.FC<viewProps> = ({ client_settings }, { useValue, useEffect }): Roact.Element => {
    let temp_avg_fps = useValue(0);
    let fps = Roact.createBinding(1 / temp_avg_fps.value);
    let avg_fps = Roact.createBinding(temp_avg_fps.value);
    let visible = Roact.createBinding(client_settings.user_reflection.client_fps_counter.value);

    useEffect(() => {
        let maid = new Maid();
        let fps_avg_check_time = tick() + 1;

        maid.GiveTask(
            RunService.RenderStepped.Connect((delta_time) => {
                fps[1](1 / delta_time);
                temp_avg_fps.value += 1;
                if (tick() > fps_avg_check_time) {
                    fps_avg_check_time = tick() + 1;
                    avg_fps[1](temp_avg_fps.value);
                    temp_avg_fps.value = 0;
                }
            })
        );

        maid.GiveTask(
            client_settings.user_reflection.client_fps_counter.changed.Connect((value) => {
                visible[1](value);
            })
        );

        return () => maid.DoCleaning();
    });

    return (
        <frame
            AutomaticSize={"XY"}
            BackgroundTransparency={1}
            AnchorPoint={new Vector2(1, 0)}
            Position={new UDim2(1, -10, 0, 10)}
            Visible={visible[0]}
            ZIndex={1000}
        >
            <uilistlayout HorizontalAlignment={"Right"} />
            <textlabel
                {...STYLE_TEXT_BODY}
                BackgroundTransparency={1}
                AutomaticSize={"X"}
                TextXAlignment={"Left"}
                Size={new UDim2(0, 0, 0, 14)}
                TextColor3={new Color3(0.35, 1, 0.35)}
                Text={fps[0].map((value) => `fps: ${tostring(math.floor(value))}`)}
            />
            <textlabel
                {...STYLE_TEXT_BODY}
                BackgroundTransparency={1}
                AutomaticSize={"X"}
                TextXAlignment={"Left"}
                Size={new UDim2(0, 0, 0, 14)}
                TextColor3={new Color3(0.35, 1, 0.35)}
                Text={avg_fps[0].map((value) => `avg. fps: ${tostring(math.floor(value))}`)}
            />
        </frame>
    );
};

export = new Hooks(Roact)(FpsCounter);