import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import { validBackgroundId, validFontId } from './appearance'
import { installBrowserApi } from './platform/browserApi'
import './appearance-styles.css'
import './index.css'

installBrowserApi()

{
  const bg =
    localStorage.getItem('myreader-bg-id') ??
    localStorage.getItem('myreader-theme') ??
    localStorage.getItem('myreader-bg') ??
    '1'
  const font = localStorage.getItem('myreader-font-id') ?? '0'
  const line = localStorage.getItem('myreader-preview-line-height')
  const lineN = line ? Number.parseFloat(line) : NaN
  const lineH = Number.isFinite(lineN) ? String(Math.min(3, Math.max(1, lineN))) : '1.5'
  document.documentElement.dataset.bg = validBackgroundId(bg) ?? '1'
  document.documentElement.dataset.font = validFontId(font) ?? '0'
  document.documentElement.style.setProperty('--preview-line-height', lineH)
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
)
