import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from '@mui/material/styles';
import { BrowserRouter } from 'react-router-dom';
import { positions, Provider as AlertProvider, transitions } from 'react-alert';
import AlertTemplate from './components/alert';

import theme from './theme/theme';
import App from './App';
import './index.css';
import { LayoutProvider } from '@/contexts/LayoutContext';
import { LoadingProvider } from '@/contexts/LoadingContext';
import { AuthProvider } from '@/contexts/AuthContext';

// alert optional configuration
const options = {
  // you can also just use 'bottom center'
  position: positions.BOTTOM_CENTER,
  offset: '30px',
  // you can also just use 'scale'
  transition: transitions.SCALE,
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <LayoutProvider>
    <LoadingProvider>
      <BrowserRouter>
        <AuthProvider>
          <ThemeProvider theme={theme}>
            <AlertProvider template={AlertTemplate} {...options}>
              <App />
            </AlertProvider>
          </ThemeProvider>
        </AuthProvider>
      </BrowserRouter>
    </LoadingProvider>
  </LayoutProvider>,
);
