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 { 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>
    <HashRouter>
      <Provider store={store}>
        <App />
        <ToastContainer />
      </Provider>
    </HashRouter>
  </React.StrictMode>
)