import './assets/main.css'

import React from 'react'
import ReactDOM from 'react-dom/client'
import IndexPage from './pages'
import SettingsPage from './pages/settings'
import { defaultConfig } from '../../common/config'

const search = new URLSearchParams(window.location.search)

const scaleFactorRaw = search.get('scaleFactor') || defaultConfig.scaleFactor
const scaleFactorTryNumber = Number(scaleFactorRaw)
const scaleFactor = Number.isFinite(scaleFactorTryNumber) ? scaleFactorTryNumber : 1
window.document.documentElement.style.setProperty('--size-scale-factor', scaleFactor.toString())

const naturalKeyColor = search.get('naturalKeyColor') || defaultConfig.naturalKeyColor
window.document.documentElement.style.setProperty('--color-natural-key', naturalKeyColor)

const accidentalKeyColor = search.get('accidentalKeyColor') || defaultConfig.accidentalKeyColor
window.document.documentElement.style.setProperty('--color-accidental-key', accidentalKeyColor)

window.document.documentElement.style.setProperty('--color-channel-0', search.get('highlightColor'))

const windows = {
  main: IndexPage,
  settings: SettingsPage
}

const currentWindowKey = search.get('window') ?? 'main'
const Page = windows[currentWindowKey]

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Page params={search} />
  </React.StrictMode>
)