import { useLayoutEffect, useState } from 'react'
import { Outlet, useHref, useNavigate, type NavigateOptions } from 'react-router'
import { Provider } from '@react-spectrum/s2/Provider'
import BasicLayout from './components/layout-basic'
import { getInitialColorScheme, ThemeContext, themeStorageKey } from './theme'

// Configure the type of the `routerOptions` prop on all React Spectrum components.
declare module '@react-spectrum/s2/Provider' {
  interface RouterConfig {
    routerOptions: NavigateOptions
  }
}

function App() {
  const navigate = useNavigate()
  const [colorScheme, setColorScheme] = useState(getInitialColorScheme)

  useLayoutEffect(() => {
    document.documentElement.dataset.theme = colorScheme
    try {
      localStorage.setItem(themeStorageKey, colorScheme)
    } catch {
      // Keep applying the theme even when browser storage is unavailable.
    }
  }, [colorScheme])

  return (
    <ThemeContext value={{ colorScheme, setColorScheme }}>
      <Provider background="base" colorScheme={colorScheme} router={{ navigate, useHref }}>
        <BasicLayout>
          <Outlet />
        </BasicLayout>
      </Provider>
    </ThemeContext>
  )
}

export default App