import React, { useRef, useCallback } from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from "react-router-dom";
import { SessionWrapper } from "./SessionWrapper";
import { Main } from "./Main";
import { Snack, SeverityType } from './Snack';

export function PathRouter({ setSnack }: { setSnack: any }) {
    const location = useLocation();
    const segments = location.pathname.split("/").filter(Boolean);
    const sessionId = segments[segments.length - 1];

    return (
        <SessionWrapper setSnack={setSnack}>
            <Main setSnack={setSnack} sessionId={sessionId} />
        </SessionWrapper>
    );
}

function App() {
    const snackRef = useRef<any>(null);

    const setSnack = useCallback((message: string, severity?: SeverityType) => {
        snackRef.current?.setSnack(message, severity);
    }, [snackRef]);

    return (
        <>
            <Router>
                <Routes>
                    <Route path="*" element={<PathRouter setSnack={setSnack} />} />
                </Routes>
            </Router>
            <Snack
                ref={snackRef}
            />
        </>
    );
}

export default App;