import React from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { AppShell } from '@/app'
import { ConfigProvider } from '@/state/config'
import { I18nProvider } from '@/state/i18n'
import { queryClient } from '@/lib/queryClient'
import { bindMemorySync } from '@/lib/syncEvents'
import '@/styles/globals.css'

function Root() {
  React.useEffect(() => {
    const unlistenPromise = bindMemorySync(queryClient)
    return () => {
      void unlistenPromise.then((unlisten) => unlisten?.())
    }
  }, [])

  return (
    <QueryClientProvider client={queryClient}>
      <I18nProvider>
        <ConfigProvider>
          <AppShell />
        </ConfigProvider>
      </I18nProvider>
      {import.meta.env.DEV ? <ReactQueryDevtools initialIsOpen={false} /> : null}
    </QueryClientProvider>
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>
)
