import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { ColorFunctionProvider } from './ColorFunctionContext';
import { Notifications } from './components/Notifications';
import { ColorCards } from './pages/Cards';
import { CardsDetail } from './pages/CardsDetail';
import { ColorCompare } from './pages/Compare';
import { Harmonies } from './pages/Harmonies';
import { Home } from './pages/Home';
import { LightenDarken } from './pages/LightenDarken';
import { MainLayout } from './pages/MainLayout';
import { Mixer } from './pages/Mixer';
import { NewScheme } from './pages/NewScheme';
import { AutomaticPalette } from './pages/Palette';
import { SchemeDetail } from './pages/SchemeDetail';
import { SchemeNotFound } from './pages/SchemeNotFound';
import { Schemes } from './pages/Schemes';
import { TintsShades } from './pages/TintsShades';
import { Tones } from './pages/Tones';
import { WACGCheck } from './pages/WACG';
import { Wheels } from './pages/Wheels';

const routes = createBrowserRouter([
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { index: true, element: <Home /> },
      {
        path: 'schemes',
        element: <Schemes />,
        children: [
          { index: true, element: <div /> },
          { path: 'new', element: <NewScheme /> },
          { path: 'not-found', element: <SchemeNotFound /> },
          { path: ':id', element: <SchemeDetail /> },
        ],
      },
      { path: 'harmonies', element: <Harmonies /> },
      { path: 'wheels', element: <Wheels /> },
      { path: 'tones', element: <Tones /> },
      { path: 'tints-shades', element: <TintsShades /> },
      { path: 'lighten-darken', element: <LightenDarken /> },
      { path: 'mixer', element: <Mixer /> },
      { path: 'palette', element: <AutomaticPalette /> },
      { path: 'wacg', element: <WACGCheck /> },
      { path: 'compare', element: <ColorCompare /> },
      {
        path: 'cards',
        element: <ColorCards />,
        children: [
          { path: 'chinese', element: <CardsDetail mainTag="chinese" /> },
          { path: 'japanese', element: <CardsDetail mainTag="japanese" /> },
        ],
      },
    ],
  },
]);

export function App() {
  return (
    <ColorFunctionProvider>
      <Notifications>
        <title>Color Lab</title>
        <RouterProvider router={routes}></RouterProvider>
      </Notifications>
    </ColorFunctionProvider>
  );
}