import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { SocketContext, socket } from './context/socket';
import { ProvideAuth } from './context/auth';
import { ToastContainer } from 'react-toastify';
import { ProvideSettings } from './context/settings';
import 'react-toastify/dist/ReactToastify.css';
import './index.css';
import Snowfall from 'react-snowfall';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <ProvideAuth>
      <ProvideSettings>
        <SocketContext.Provider value={socket}>
          <>
            <Snowfall style={{
              zIndex: 2,
              position: 'fixed',
              width: '100vw',
              height: '100vh'}} />
            <App />
          </>
          <ToastContainer />
        </SocketContext.Provider>
      </ProvideSettings>
    </ProvideAuth>
  </React.StrictMode>
);