import { createRootRoute, Outlet, useNavigate } from "@tanstack/react-router";
import { TanStackDevtools } from "@tanstack/react-devtools";
import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
import { useEffect } from "react";

import { Route as GameRoute } from "./game";
import RootLayout from "@/routes/-/RootLayout";

export const Route = createRootRoute({
  notFoundComponent: () => {
    const navigate = useNavigate();
    useEffect(() => void navigate({ to: GameRoute.to }), [navigate]);
  },
  component: () => (
    <>
      <RootLayout>
        <Outlet />
      </RootLayout>
      <TanStackDevtools
        config={{
          defaultOpen: false,
          panelLocation: "bottom",
          theme: "dark",
          position: "middle-left",
        }}
        plugins={[
          {
            name: "TanStack Query",
            render: <ReactQueryDevtoolsPanel />,
          },
          {
            name: "TanStack Router",
            render: <TanStackRouterDevtoolsPanel />,
          },
        ]}
      />
    </>
  ),
});
