import DarkMode from '@mui/icons-material/DarkMode'
import LightMode from '@mui/icons-material/LightMode'
import SettingsBrightness from '@mui/icons-material/SettingsBrightness'
import { IconButton, Tooltip, useColorScheme } from '@mui/material'
import type { ReactNode } from 'react'

type Mode = 'light' | 'dark' | 'system'

const NEXT: Record<Mode, Mode> = { light: 'dark', dark: 'system', system: 'light' }

const ICONS: Record<Mode, ReactNode> = { light: <LightMode />, dark: <DarkMode />, system: <SettingsBrightness /> }

/** An icon button cycling light, dark and system theme. MUI stores the choice; mode is undefined on the first render. */
export default function ThemeMenu() {
  const { mode, setMode } = useColorScheme()
  if (!mode) {
    return null
  }
  return (
    <Tooltip title={`Theme: ${mode}. Switch to ${NEXT[mode]}.`}>
      <IconButton aria-label={`theme ${mode}, switch to ${NEXT[mode]}`} onClick={() => setMode(NEXT[mode])}>
        {ICONS[mode]}
      </IconButton>
    </Tooltip>
  )
}