import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles'
import _ from 'lodash'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import { HashRouter } from 'react-router-dom'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import App from './App.tsx'
import './index.css'
import store from './store/store.ts'
import { theme } from './theme'
import { saveState } from './utils'

store.subscribe(
  _.throttle(() => {
    saveState({
      auth: store.getState().auth,
      metadata: store.getState().metadata,
      userRobotImage: store.getState().userRobotImage,
      relays: store.getState().relays
    })
  }, 1000)
)

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <CssVarsProvider theme={theme}>
      <HashRouter>
        <Provider store={store}>
          <App />
          <ToastContainer />
        </Provider>
      </HashRouter>
    </CssVarsProvider>
  </React.StrictMode>
)
