import { useCallback, useEffect, useState } from 'react'
import {
  GUANGHU_THEMES,
  GUANGHU_THEME_STORAGE_KEY,
  readGuanghuTheme,
  writeGuanghuTheme,
  type GuanghuTheme,
} from '../lib/guanghuTheme'
import { applyThemeModeToDocument, writeStoredThemeMode } from '../lib/themeMode'

function applyGuanghuTheme(theme: GuanghuTheme): void {
  document.documentElement.setAttribute('data-guanghu-theme', theme)
  if (theme === 'native') return

  const mode = ['lake-light', 'dawn-gold', 'tundra-green', 'peach-mist'].includes(theme) ? 'light' : 'dark'
  applyThemeModeToDocument(document, mode)
  writeStoredThemeMode(window.localStorage, mode)
}

export function useGuanghuTheme(): {
  theme: GuanghuTheme
  setTheme: (theme: GuanghuTheme) => void
  cycleTheme: () => void
} {
  const [theme, setTheme] = useState<GuanghuTheme>(() => (
    typeof window === 'undefined' ? 'native' : readGuanghuTheme(window.localStorage)
  ))

  useEffect(() => {
    applyGuanghuTheme(theme)
    writeGuanghuTheme(window.localStorage, theme)
  }, [theme])

  const cycleTheme = useCallback(() => {
    setTheme(current => {
      const index = GUANGHU_THEMES.indexOf(current)
      return GUANGHU_THEMES[(index + 1) % GUANGHU_THEMES.length]
    })
  }, [])

  return { theme, setTheme, cycleTheme }
}

export { GUANGHU_THEME_STORAGE_KEY }