Dark and Light Theming

import React, { useEffect, useState, useCallback, useMemo } from 'react'
import { Button } from '@tocino-ui/button'

/**
 * ====== CONSTANTS ======
 */
const THEME_STORAGE_KEY = 'your-design-system-theme'
const THEME_MODES = {
  LIGHT: 'light',
  DARK: 'dark',
  SYSTEM: 'system',
}

/**
 * ====== THEME MANAGER ======
 */
const themeManager = {
  getStoredTheme: () => {
    if (typeof window === 'undefined') return THEME_MODES.SYSTEM
    
    try {
      const stored = localStorage.getItem(THEME_STORAGE_KEY)
      if (stored && Object.values(THEME_MODES).includes(stored)) {
        return stored
      }
    } catch (error) {
      console.warn('Failed to read theme setting:', error)
    }
    
    return THEME_MODES.SYSTEM
  },

  setStoredTheme: (theme) => {
    if (typeof window === 'undefined') return
    
    try {
      localStorage.setItem(THEME_STORAGE_KEY, theme)
    } catch (error) {
      console.warn('Failed to save theme setting:', error)
    }
  },

  getSystemTheme: () => {
    if (typeof window === 'undefined') return THEME_MODES.DARK
    
    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? THEME_MODES.DARK
      : THEME_MODES.LIGHT
  },

  resolveTheme: (theme) => {
    return theme === THEME_MODES.SYSTEM ? themeManager.getSystemTheme() : theme
  },

  applyTheme: (resolvedTheme) => {
    if (typeof document === 'undefined') return
    
    document.documentElement.setAttribute('data-theme', resolvedTheme)
    
    // Set color-scheme to improve the display of browser-native components
    document.documentElement.style.colorScheme = resolvedTheme
  },
}

/**
 * ====== useTheme Hook ======
 */
function useTheme(initialTheme = THEME_MODES.SYSTEM) {
  // Initialize theme state
  const [theme, setThemeState] = useState(() => {
    if (typeof window === 'undefined') return initialTheme
    return themeManager.getStoredTheme()
  })

  // Calculate the actually rendered theme
  const resolvedTheme = useMemo(() => {
    return themeManager.resolveTheme(theme)
  }, [theme])

  // Listen for system theme changes
  useEffect(() => {
    if (typeof window === 'undefined' || theme !== THEME_MODES.SYSTEM) return

    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    
    const handleSystemThemeChange = () => {
      // When in system mode, force re-render to update resolvedTheme
      setThemeState(THEME_MODES.SYSTEM)
    }

    mediaQuery.addEventListener('change', handleSystemThemeChange)
    return () => mediaQuery.removeEventListener('change', handleSystemThemeChange)
  }, [theme])

  // Apply theme to DOM
  useEffect(() => {
    themeManager.applyTheme(resolvedTheme)
  }, [resolvedTheme])

  // Persist theme setting
  useEffect(() => {
    themeManager.setStoredTheme(theme)
  }, [theme])

  // Toggle theme function
  const toggleTheme = useCallback(() => {
    setThemeState(prev => {
      if (prev === THEME_MODES.SYSTEM) {
        // In system mode, determine the toggle direction based on the current system theme
        const currentSystemTheme = themeManager.getSystemTheme()
        return currentSystemTheme === THEME_MODES.DARK 
          ? THEME_MODES.LIGHT 
          : THEME_MODES.DARK
      }
      return prev === THEME_MODES.DARK ? THEME_MODES.LIGHT : THEME_MODES.DARK
    })
  }, [])

  // Set theme function
  const setTheme = useCallback((newTheme) => {
    setThemeState(newTheme)
  }, [])

  return useMemo(
    () => ({
      theme,
      resolvedTheme,
      toggleTheme,
      setTheme,
    }),
    [theme, resolvedTheme, toggleTheme, setTheme]
  )
}

/**
 * ====== Usage Example ======
 */
export default function ThemeExample() {
  const { theme, resolvedTheme, toggleTheme, setTheme } = useTheme()

  return (
    <div className="container">
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@tocino-ui/design-tokens/dist/normalize/normalize.css"
      />
      
      <h2 className="header">
        Current Theme: {theme}
        {theme === 'system' && ` (resolved: ${resolvedTheme})`}
      </h2>
      
      <div className="button-group">
        <Button 
          variant={theme === 'light' ? 'filled' : 'outline'} 
          onClick={() => setTheme('light')}
        >
          Light Mode
        </Button>
        
        <Button 
          variant={theme === 'dark' ? 'filled' : 'outline'} 
          onClick={() => setTheme('dark')}
        >
          Dark Mode
        </Button>
        
        <Button 
          variant={theme === 'system' ? 'filled' : 'outline'} 
          onClick={() => setTheme('system')}
        >
          System Mode
        </Button>
      </div>
      
      <div className="info">
        <p>Try switching your operating system's theme settings to see the changes in System Mode!</p>
        <p>Theme settings are automatically saved in localStorage.</p>
      </div>
    </div>
  )
}