import React, { useEffect } from "react";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { GlobalContextProviders } from "./components/_globalContextProviders";
import Page_0 from "./pages/_index.tsx";
import PageLayout_0 from "./pages/_index.pageLayout.tsx";
import Page_1 from "./pages/identify.tsx";
import PageLayout_1 from "./pages/identify.pageLayout.tsx";
import Page_2 from "./pages/spotify.callback.tsx";
import PageLayout_2 from "./pages/spotify.callback.pageLayout.tsx";
import Page_3 from "./pages/settings.tsx";
import PageLayout_3 from "./pages/settings.pageLayout.tsx";
import Page_4 from "./pages/convert.tsx";
import PageLayout_4 from "./pages/convert.pageLayout.tsx";
import Page_5 from "./pages/quality.tsx";
import PageLayout_5 from "./pages/quality.pageLayout.tsx";
import Page_6 from "./pages/history.tsx";
import PageLayout_6 from "./pages/history.pageLayout.tsx";
import Page_7 from "./pages/analyze.tsx";
import PageLayout_7 from "./pages/analyze.pageLayout.tsx";
import Page_8 from "./pages/library.tsx";
import PageLayout_8 from "./pages/library.pageLayout.tsx";
import Page_9 from "./pages/spotify-library.tsx";
import PageLayout_9 from "./pages/spotify-library.pageLayout.tsx";
import Page_10 from "./pages/artist.$id.tsx";
import PageLayout_10 from "./pages/artist.$id.pageLayout.tsx";
import Page_11 from "./pages/album.$id.tsx";
import PageLayout_11 from "./pages/album.$id.pageLayout.tsx";

if (!window.requestIdleCallback) {
  window.requestIdleCallback = (cb) => {
    setTimeout(cb, 1);
  };
}

import "./base.css";
import "./global.css";

const fileNameToRoute = new Map([["./pages/_index.tsx","/"],["./pages/identify.tsx","/identify"],["./pages/spotify.callback.tsx","/spotify/callback"],["./pages/settings.tsx","/settings"],["./pages/convert.tsx","/convert"],["./pages/quality.tsx","/quality"],["./pages/history.tsx","/history"],["./pages/analyze.tsx","/analyze"],["./pages/library.tsx","/library"],["./pages/spotify-library.tsx","/spotify-library"],["./pages/artist.$id.tsx","/artist/:id"],["./pages/album.$id.tsx","/album/:id"]]);
const fileNameToComponent = new Map([
    ["./pages/_index.tsx", Page_0],
["./pages/identify.tsx", Page_1],
["./pages/spotify.callback.tsx", Page_2],
["./pages/settings.tsx", Page_3],
["./pages/convert.tsx", Page_4],
["./pages/quality.tsx", Page_5],
["./pages/history.tsx", Page_6],
["./pages/analyze.tsx", Page_7],
["./pages/library.tsx", Page_8],
["./pages/spotify-library.tsx", Page_9],
["./pages/artist.$id.tsx", Page_10],
["./pages/album.$id.tsx", Page_11],
  ]);

function makePageRoute(filename: string) {
  const Component = fileNameToComponent.get(filename);
  return <Component />;
}

function toElement({
  trie,
  fileNameToRoute,
  makePageRoute,
}: {
  trie: LayoutTrie;
  fileNameToRoute: Map<string, string>;
  makePageRoute: (filename: string) => React.ReactNode;
}) {
  return [
    ...trie.topLevel.map((filename) => (
      <Route
        key={fileNameToRoute.get(filename)}
        path={fileNameToRoute.get(filename)}
        element={makePageRoute(filename)}
      />
    )),
    ...Array.from(trie.trie.entries()).map(([Component, child], index) => (
      <Route
        key={index}
        element={
          <Component>
            <Outlet />
          </Component>
        }
      >
        {toElement({ trie: child, fileNameToRoute, makePageRoute })}
      </Route>
    )),
  ];
}

type LayoutTrieNode = Map<
  React.ComponentType<{ children: React.ReactNode }>,
  LayoutTrie
>;
type LayoutTrie = { topLevel: string[]; trie: LayoutTrieNode };
function buildLayoutTrie(layouts: {
  [fileName: string]: React.ComponentType<{ children: React.ReactNode }>[];
}): LayoutTrie {
  const result: LayoutTrie = { topLevel: [], trie: new Map() };
  Object.entries(layouts).forEach(([fileName, components]) => {
    let cur: LayoutTrie = result;
    for (const component of components) {
      if (!cur.trie.has(component)) {
        cur.trie.set(component, {
          topLevel: [],
          trie: new Map(),
        });
      }
      cur = cur.trie.get(component)!;
    }
    cur.topLevel.push(fileName);
  });
  return result;
}

function NotFound() {
  return (
    <div>
      <h1>Not Found</h1>
      <p>The page you are looking for does not exist.</p>
      <p>Go back to the <a href="/" style={{ color: 'blue' }}>home page</a>.</p>
    </div>
  );
}

import { useLocation, useNavigationType } from "react-router-dom";

export default function ScrollManager() {
  const { pathname, search, hash } = useLocation();
  const navType = useNavigationType();

  useEffect(() => {
    if (navType === "POP") return;

    if (hash) return;

    window.scrollTo({ top: 0, left: 0, behavior: "instant" });
  }, [pathname, search, hash, navType]);

  return null;
}

export function App() {
  return (
    <BrowserRouter future={{ v7_startTransition: false, v7_relativeSplatPath: false }}>
      <ScrollManager />
      <GlobalContextProviders>
        <Routes>
          {toElement({ trie: buildLayoutTrie({
"./pages/_index.tsx": PageLayout_0,
"./pages/identify.tsx": PageLayout_1,
"./pages/spotify.callback.tsx": PageLayout_2,
"./pages/settings.tsx": PageLayout_3,
"./pages/convert.tsx": PageLayout_4,
"./pages/quality.tsx": PageLayout_5,
"./pages/history.tsx": PageLayout_6,
"./pages/analyze.tsx": PageLayout_7,
"./pages/library.tsx": PageLayout_8,
"./pages/spotify-library.tsx": PageLayout_9,
"./pages/artist.$id.tsx": PageLayout_10,
"./pages/album.$id.tsx": PageLayout_11,
}), fileNameToRoute, makePageRoute })} 
          <Route path="*" element={<NotFound />} />
        </Routes>
      </GlobalContextProviders>
    </BrowserRouter>
  );
}