import { StyledEngineProvider } from '@mui/material/styles';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import { BasketProvider } from './helper/BasketProvider';
import NavBar from './helper/navbar/NavBar';
import Account from './pages/Account';
import Contact from './pages/Contact';
import Home from './pages/Home';
import NoPage from './pages/NoPage';
import Orders from './pages/Orders';
import Payment from './pages/Payment';
import Product from './pages/Product';
import { CustomThemeProvider } from './theme/ThemeContext';
import FSComponents from './pages/FSComponents.tsx';
import AdminPanel from './pages/AdminPanel';
import { AccountProvider } from './helper/AccountProvider.tsx';

export default function App() {

  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <StyledEngineProvider injectFirst>
        <CustomThemeProvider>
          <AccountProvider>
            <BasketProvider>
              <BrowserRouter>
                <NavBar />
                <Routes>
                  <Route path="/" element={<Home />} />
                  <Route path="*" element={<NoPage />} />
                  <Route path="/product/:id" element={<Product />} />
                  <Route path="/checkout" element={<Payment />} />
                  <Route path="/components" element={<FSComponents />} />
                  <Route path="/contact" element={<Contact />} />
                  <Route path='/account' element={<Account />} />
                  <Route path='/orders' element={<Orders />} />
                  <Route path='/admin' element={<AdminPanel />} />
                </Routes>
              </BrowserRouter>
            </BasketProvider>
          </AccountProvider>
        </CustomThemeProvider>
      </StyledEngineProvider>
    </QueryClientProvider>
  )
}
