import React, { useEffect, useState, useRef, JSX } from "react";
import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import { backstoryTheme } from "./BackstoryTheme";

import { ConversationHandle } from "components/Conversation";
import { CandidateRoute } from "routes/CandidateRoute";
import { BackstoryLayout } from "components/layout/BackstoryLayout";
import { ChatQuery } from "types/types";
import { AuthProvider } from "hooks/AuthContext";
import { AppStateProvider } from "hooks/GlobalContext";

import "./BackstoryApp.css";
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

const BackstoryApp = (): JSX.Element => {
    const navigate = useNavigate();
    const location = useLocation();
    const chatRef = useRef<ConversationHandle>(null);
    const submitQuery = (query: ChatQuery): void => {
        console.log(
            `handleSubmitChatQuery:`,
            query,
            chatRef.current ? " sending" : "no handler"
        );
        chatRef.current?.submitQuery(query);
        navigate("/chat");
    };
    const [page, setPage] = useState<string>("");

    useEffect(() => {
        const currentRoute = location.pathname.split("/")[1]
            ? `/${location.pathname.split("/")[1]}`
            : "/";
        setPage(currentRoute);
    }, [location.pathname]);

    // Render appropriate routes based on user type
    return (
        <ThemeProvider theme={backstoryTheme}>
            <AuthProvider>
                <AppStateProvider>
                    <Routes>
                        <Route
                            path="/u/:username"
                            element={<CandidateRoute />}
                        />
                        {/* Static/shared routes */}
                        <Route
                            path="/*"
                            element={
                                <BackstoryLayout
                                    {...{ page, chatRef, submitQuery }}
                                />
                            }
                        />
                    </Routes>
                </AppStateProvider>
            </AuthProvider>
        </ThemeProvider>
    );
};

export { BackstoryApp };