import React from 'react'
import ReactDOM from 'react-dom/client'
import { HeroUIProvider } from '@heroui/react'
import { QueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
import { BrowserRouter } from 'react-router-dom'
import { init } from '@noriginmedia/norigin-spatial-navigation'
import { InputModeProvider } from './context/InputModeContext'
import App from './App.tsx'
import './index.css'

init({
  debug: false,
  visualDebug: false
})

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // Keep offline disk cache for 24 hours for instant loading
    },
  },
})

const persister = createSyncStoragePersister({
  storage: window.localStorage,
})

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <HeroUIProvider>
        <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
          <InputModeProvider>
            <App />
          </InputModeProvider>
        </PersistQueryClientProvider>
      </HeroUIProvider>
    </BrowserRouter>
  </React.StrictMode>,
)
