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 { DeviceProvider } from './providers/DeviceProvider/DeviceProvider';
import { HashRouter } from 'react-router-dom';

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

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