import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './assets/css/loader.css'
import './assets/css/bootstrap.css'
import './assets/css/animate.css';
import './assets/css/chat.css';
import './assets/css/modal.css'
import './assets/css/driver-contact.css'
import './index.css';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

import 'moment/locale/th';
import { BrowserRouter } from 'react-router-dom'
import { MapProvider } from './contexts/mapContext.jsx'
import { MQTTProvider } from './contexts/mqttContext';
import { CurrentLocationProvider } from './contexts/CurrentLocationContext.jsx'
import UserWalletBalanceProvider from './contexts/UserWalletBalance.jsx'
import { DeviceInfoProvider } from './contexts/DeviceInfoContext.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <MQTTProvider>
      <UserWalletBalanceProvider>
      <CurrentLocationProvider>
        <DeviceInfoProvider>
        <MapProvider>
          <App />
        </MapProvider>
        </DeviceInfoProvider>
        </CurrentLocationProvider>
        </UserWalletBalanceProvider>
    </MQTTProvider>
  </BrowserRouter>
)