import {AboutDialog} from "./composites/about-dialog";
import {AnalysisSheet} from "./composites/analysis.-sheet";
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";

export function App() {

    const [replayId, setReplayId] = useState<string>("");

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

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

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

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