import {AboutDialog} from "./composites/about-dialog";
import {Navbar} from "./composites/Menu";
import {SongSlider} from "./composites/song-slider";
import {Helper} from "./composites/helper";
import {useEffect, useState} from "react";
import {OsuRenderer} from "@/osu/OsuRenderer";
import {Stats} from "@/interface/composites/stats";

export function App() {

    const [replayId, setReplayId] = useState<number>(0);

    useEffect(() => {
        let pathReplayId = Number.parseInt(location.pathname.slice(1, location.pathname.length));

        const loadReplay = async () => {
            if(document.location.hostname === "localhost") {
                await OsuRenderer.loadReplayFromUrl(`http://localhost:8080/score/${pathReplayId}/replay`, pathReplayId);
                return;
            }
            await OsuRenderer.loadReplayFromUrl(`https://nise.moe/api/score/${pathReplayId}/replay`, pathReplayId);
        };

        if(replayId !== pathReplayId) {
            setReplayId(pathReplayId);
            loadReplay();
        }
    }, [location.pathname]);

    return (
        <>
            <Navbar/>
            <AboutDialog/>
            <SongSlider/>
            <Stats/>
            <Helper/>
        </>
    );
}