import { useEffect, useRef, useState } from 'react'
import { Button, Text } from '@react-spectrum/s2/Button'
import { ActionButton } from '@react-spectrum/s2/ActionButton'
import { ToggleButton } from '@react-spectrum/s2/ToggleButton'
import { ActionMenu, MenuItem } from '@react-spectrum/s2/ActionMenu'
import { Badge } from '@react-spectrum/s2/Badge'
import { StatusLight } from '@react-spectrum/s2/StatusLight'
import { ProgressBar } from '@react-spectrum/s2/ProgressBar'
import { ProgressCircle } from '@react-spectrum/s2/ProgressCircle'
import { Meter } from '@react-spectrum/s2/Meter'
import { InlineAlert, Heading, Content } from '@react-spectrum/s2/InlineAlert'
import { DialogTrigger, Dialog, ButtonGroup } from '@react-spectrum/s2/Dialog'
import { Popover } from '@react-spectrum/s2/Popover'
import { Tooltip, TooltipTrigger } from '@react-spectrum/s2/Tooltip'
import { ToastContainer, ToastQueue } from '@react-spectrum/s2/Toast'
import AddIcon from '@react-spectrum/s2/icons/Add'
import EditIcon from '@react-spectrum/s2/icons/Edit'
import InfoIcon from '@react-spectrum/s2/icons/InfoCircle'
import styles from './ui-kit.module.css'

export default function ActionsFeedback() {
  const [message, setMessage] = useState('点击按钮体验交互。')
  const [selected, setSelected] = useState(false)
  const [progress, setProgress] = useState(40)
  const toastClosers = useRef<Array<() => void>>([])
  useEffect(() => () => { toastClosers.current.forEach((close) => close()) }, [])

  return (
    <>
      <section className={styles.section} aria-labelledby="kit-buttons">
        <h2 id="kit-buttons">按钮与操作</h2>
        <div className={styles.row}>
          <Button variant="primary" onPress={() => setMessage('已点击主要按钮。')}>主要按钮</Button>
          <Button variant="secondary" onPress={() => setMessage('已点击次要按钮。')}>次要按钮</Button>
          <Button variant="accent" onPress={() => setMessage('已点击强调按钮。')}><AddIcon /><Text>新建</Text></Button>
          <Button variant="negative" onPress={() => setMessage('这是危险操作的样式示例。')}>危险操作</Button>
          <Button isDisabled>禁用按钮</Button>
        </div>
        <div className={styles.row}>
          {(['S', 'M', 'L', 'XL'] as const).map((size) => <Button key={size} size={size} variant="secondary" onPress={() => setMessage(`已点击 ${size} 尺寸按钮。`)}>{size}</Button>)}
          <TooltipTrigger><ActionButton aria-label="编辑示例" onPress={() => setMessage('已点击图标按钮。')}><EditIcon /></ActionButton><Tooltip>编辑示例</Tooltip></TooltipTrigger>
          <ToggleButton isSelected={selected} onChange={setSelected}>{selected ? '已收藏' : '收藏'}</ToggleButton>
          <ActionMenu aria-label="更多示例操作" onAction={(key) => setMessage(key === 'copy' ? '已选择复制示例。' : '已选择重命名示例。')}>
            <MenuItem id="copy">复制</MenuItem><MenuItem id="rename">重命名</MenuItem>
          </ActionMenu>
        </div>
        <p role="status" className={styles.caption}>{message}</p>
      </section>

      <section className={styles.section} aria-labelledby="kit-status">
        <h2 id="kit-status">徽标与状态</h2>
        <div className={styles.row}>
          <Badge variant="neutral">默认</Badge><Badge variant="informative">信息</Badge><Badge variant="positive">成功</Badge><Badge variant="notice">提醒</Badge><Badge variant="negative">错误</Badge><Badge variant="accent">强调</Badge>
        </div>
        <div className={styles.row}>
          <StatusLight variant="positive">已完成</StatusLight><StatusLight variant="notice">待处理</StatusLight><StatusLight variant="negative">失败</StatusLight><StatusLight variant="neutral">草稿</StatusLight>
        </div>
        <div className={styles.grid}>
          <InlineAlert variant="informative"><Heading>信息提示</Heading><Content>用于展示与当前操作相关的说明。</Content></InlineAlert>
          <InlineAlert variant="positive"><Heading>成功提示</Heading><Content>这是一条成功状态示例。</Content></InlineAlert>
          <InlineAlert variant="notice"><Heading>注意事项</Heading><Content>操作前需要留意的提示信息。</Content></InlineAlert>
          <InlineAlert variant="negative"><Heading>错误提示</Heading><Content>展示问题原因及后续处理方式。</Content></InlineAlert>
        </div>
      </section>

      <section className={styles.section} aria-labelledby="kit-progress">
        <h2 id="kit-progress">进度与容量</h2>
        <div className={styles.grid}>
          <ProgressBar label="示例进度" value={progress} />
          <Meter label="已用容量" value={65} variant="notice" />
          <ProgressBar label="不确定进度" isIndeterminate />
          <div className={styles.row}><ProgressCircle aria-label="正在加载" isIndeterminate /><span>加载中</span></div>
        </div>
        <div className={styles.row}>
          <Button variant="secondary" isDisabled={progress === 100} onPress={() => setProgress((value) => Math.min(value + 20, 100))}>增加进度</Button>
          <Button variant="secondary" onPress={() => setProgress(0)}>重置进度</Button>
        </div>
      </section>

      <section className={styles.section} aria-labelledby="kit-overlays">
        <h2 id="kit-overlays">弹层与通知</h2>
        <div className={styles.row}>
          <DialogTrigger>
            <Button variant="secondary">打开对话框</Button>
            <Dialog size="S">
              {({ close }) => <><Heading>对话框示例</Heading><Content>对话框用于需要用户确认的操作。</Content><ButtonGroup><Button variant="secondary" onPress={close}>取消</Button><Button variant="primary" onPress={() => { setMessage('已确认对话框。'); close() }}>确认</Button></ButtonGroup></>}
            </Dialog>
          </DialogTrigger>
          <DialogTrigger>
            <Button variant="secondary">打开 Popover</Button>
            <Popover aria-label="Popover 示例"><div className={styles.popover}><InfoIcon /><p>Popover 用于在操作附近展示补充内容，点击外部或按 Esc 关闭。</p></div></Popover>
          </DialogTrigger>
          <TooltipTrigger><Button variant="secondary">悬停查看提示</Button><Tooltip>这是一条 Tooltip 提示。</Tooltip></TooltipTrigger>
          <Button variant="secondary" onPress={() => toastClosers.current.push(ToastQueue.positive('这是一条成功通知。', { timeout: 5000 }))}>成功通知</Button>
          <Button variant="secondary" onPress={() => toastClosers.current.push(ToastQueue.negative('这是一条错误通知示例。', { timeout: 5000 }))}>错误通知</Button>
        </div>
      </section>
      <ToastContainer />
    </>
  )
}