import { useId } from 'react'
import { ActionButton } from '@react-spectrum/s2/ActionButton'
import { DialogTrigger, Popover } from '@react-spectrum/s2/Popover'
import { Radio, RadioGroup } from '@react-spectrum/s2/RadioGroup'
import { Tooltip, TooltipTrigger } from '@react-spectrum/s2/Tooltip'
import SettingsIcon from '@react-spectrum/s2/icons/Settings'
import { useTheme } from '../theme'
import styles from './global-settings.module.css'

function GlobalSettings() {
  const titleId = useId()
  const { colorScheme, setColorScheme } = useTheme()

  return (
    <DialogTrigger>
      <TooltipTrigger>
        <ActionButton aria-label="全局设置" isQuiet>
          <SettingsIcon />
        </ActionButton>
        <Tooltip>全局设置</Tooltip>
      </TooltipTrigger>
      <Popover placement="bottom end" aria-labelledby={titleId}>
        <div className={styles.settings}>
          <h2 id={titleId} className={styles.title}>全局设置</h2>
          <RadioGroup
            label="外观模式"
            value={colorScheme}
            onChange={(value) => {
              if (value === 'light' || value === 'dark') setColorScheme(value)
            }}
          >
            <Radio value="light">亮色</Radio>
            <Radio value="dark">暗色</Radio>
          </RadioGroup>
        </div>
      </Popover>
    </DialogTrigger>
  )
}

export default GlobalSettings