import { createRoot } from 'react-dom/client'
import App from './App'
import '@mantine/core/styles.css';
import '@mantine/dropzone/styles.css';
import { createTheme, MantineProvider } from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';
import { MemoryProvider } from './providers/MemoryProvider/MemoryProvider';
import { AccountProvder } from './providers/AccountProvider/AccountProvider';
import { DatabaseProvider } from './providers/DatabaseProvider/DatabaseProvider';
import { ProtocolProvider } from './providers/ProtocolProvider/ProtocolProvider';
import { selectServer } from './servers';
import { HashRouter } from 'react-router-dom';
import { SystemProvider } from './providers/SystemProvider/SystemProvider';

const theme = createTheme({
	defaultRadius: 8
});

createRoot(document.getElementById('app') as HTMLElement).render(
	<MantineProvider theme={theme} defaultColorScheme='auto'>
		<DatabaseProvider>
			<AccountProvder>
				<ModalsProvider>
					<MemoryProvider>
						<HashRouter>
							<SystemProvider>
								<ProtocolProvider serverAddress={selectServer()}>
									<App />
								</ProtocolProvider>
							</SystemProvider>
						</HashRouter>
					</MemoryProvider>
				</ModalsProvider>
			</AccountProvder>
		</DatabaseProvider>
	</MantineProvider>
)