import { ThemeProvider } from '@mui/material/styles';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { ruRU } from '@mui/x-date-pickers/locales';
import ruLocale from 'date-fns/locale/ru';
import { RaisaAuthContext, createAuthContext } from 'raisa-fastapi-protected-web';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { AuthProvider } from './app/context/AuthProvider';
import theme from './app/theme/theme';
import './index.css';
import { ToastContainer } from 'react-toastify';
import App from './App';
import { Config } from './conf/config';
import 'react-toastify/dist/ReactToastify.css';

const baseName = (process.env.REACT_APP_ROOT_PATH || '/').replace(/\/$/, '');

const application = (
	<ThemeProvider theme={theme}>
		<LocalizationProvider
			dateAdapter={AdapterDateFns}
			adapterLocale={ruLocale}
			localeText={ruRU.components.MuiLocalizationProvider.defaultProps.localeText}>
			<AuthProvider>
				<BrowserRouter
					basename={baseName}
					future={{
						v7_startTransition: true,
						v7_relativeSplatPath: true,
					}}>
					<App />
					<ToastContainer autoClose={2000} style={{ zIndex: 10000 }} />
				</BrowserRouter>
			</AuthProvider>
		</LocalizationProvider>
	</ThemeProvider>
);

const root = Config.IS_PRODUCTION ? (
	<RaisaAuthContext
		authClient={createAuthContext(Config.KEYCLOAK_URL, Config.REALM, Config.CLIENT_ID)}
		app={{ appName: Config.APP_NAME, namespace: Config.NAMESPACE }}>
		{application}
	</RaisaAuthContext>
) : (
	application
);

createRoot(document.getElementById('root')).render(root);