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

const 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 App2() {
    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}
            />
        </>
    );
}


const App = () => {
    return (
        <Router>
            <BackstoryApp />
        </Router>
    );
};

export default App;