import React from "react";
import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import UrdfView from "./pages/UrdfView";
import { ThemeProvider } from "./contexts/ThemeContext";
import { DragAndDropProvider } from "./contexts/DragAndDropContext";
import { UrdfProvider } from "./contexts/UrdfContext";
import { MyListProvider } from "./hooks/use-my-list";

const queryClient = new QueryClient();

const App = () => {
  return (
    <ThemeProvider defaultTheme="system">
      <QueryClientProvider client={queryClient}>
        <TooltipProvider>
          <UrdfProvider>
            {/* TODO: check whether this is necessary <MyListProvider>  */}
            <MyListProvider>
              <Toaster />
              <Sonner />
              <DragAndDropProvider>
                <UrdfView />
              </DragAndDropProvider>
              {/* <BrowserRouter>
                <Routes>
                  <Route path="/" element={<Index />} />
                  <Route
                    path="/playground"
                    element={
                      <DragAndDropProvider>
                        <UrdfView />
                      </DragAndDropProvider>
                    }
                  />
                  <Route path="/content/:id" element={<ContentDetail />} />
                  <Route path="/my-list" element={<MyList />} />
                  <Route path="/new" element={<NewAndPopular />} />
                  <Route path="/explore" element={<Explore />} />
                  <Route path="*" element={<NotFound />} />
                </Routes>
              </BrowserRouter> */}
            </MyListProvider>
          </UrdfProvider>
        </TooltipProvider>
        {/* https://tanstack.com/query/latest/docs/framework/react/devtools */}
        {/* <ReactQueryDevtools initialIsOpen={false} /> */}
      </QueryClientProvider>
    </ThemeProvider>
  );
};

export default App;