import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
import ThemeContextProvider from './ThemeContextProvider'
import Schedule from './components/Schedule';
import Registry from './components/Registry';
import GuestLogin from './features/auth/GuestLogin';
import Rsvp from './components/Rsvp';
import RsvpForm from './components/RsvpForm';
import Admin from './components/Admin';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: 'schedule',
        element: <Schedule />
      },
      {
        path: 'registry',
        element: <Registry />
      },
      {
        path: 'guest-login',
        element: <GuestLogin />
      },
      {
        path: 'admin',
        element: <Admin />
      }
    ],
  },
  {
    element: <Rsvp />,
    children: [
      {
        path: 'rsvp',
        element: <RsvpForm />
      }
    ]
  }
], { basename: '/wedding' });

const enableMocking = async () => {
  const { worker } = await import('./mocks/browser');
  return worker.start();
};

enableMocking().then(() => {
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <Provider store={store}>
        <ThemeContextProvider>
          <RouterProvider router={router} />
        </ThemeContextProvider>
      </Provider>
    </React.StrictMode>
  );
});