import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { NStartUiProvider, DatePickerProvider, DATE_PICKER_LOCALE_RU } from '@nstart/ui'
import { AuthProvider } from 'react-oidc-context'
import { routeTree } from './routeTree.gen'
import { oidcAuthConfig } from '@/auth/oidcConfig'
import { TokenSync } from '@/auth/TokenSync'
import { RequireAuth } from '@/auth/RequireAuth'
import './i18n'
import './styles.css'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 30_000, retry: 1 },
  },
})

const router = createRouter({ routeTree, context: { queryClient } })

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AuthProvider {...oidcAuthConfig}>
      <TokenSync />
      <NStartUiProvider>
        <RequireAuth>
          <QueryClientProvider client={queryClient}>
            <DatePickerProvider datePicker={DATE_PICKER_LOCALE_RU}>
              <RouterProvider router={router} />
            </DatePickerProvider>
          </QueryClientProvider>
        </RequireAuth>
      </NStartUiProvider>
    </AuthProvider>
  </StrictMode>,
)
