import { useState } from 'react'
import { RadioGroup, Text } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

const OPTIONS = [
  { value: 'grid', label: '网格视图' },
  { value: 'list', label: '列表视图' },
  { value: 'compact', label: '紧凑视图（暂不可用）', disabled: true },
]

export function RadioGroups() {
  const [view, setView] = useState('grid')

  return (
    <Section
      id="radio"
      title="单选"
      api="RadioGroup"
      desc="互斥选项组：原生 radio，键盘方向键在组内切换。单个「开/关」用 Switch，多选用 Checkbox。"
    >
      <Demo
        title="基础用法"
        desc="纵向排列适合设置项；横向排列适合 2–3 个短选项。"
        layout="column"
        code={`const [view, setView] = useState('grid')

<RadioGroup value={view} onChange={setView} options={OPTIONS} />
<RadioGroup value={view} onChange={setView} options={OPTIONS} direction="row" />`}
      >
        <RadioGroup value={view} onChange={setView} options={OPTIONS} />
        <RadioGroup value={view} onChange={setView} options={OPTIONS} direction="row" />
      </Demo>

      <Demo
        title="禁用"
        desc="整组禁用时，所有选项都不可选；单个选项禁用只影响它自己。"
        code={`<RadioGroup value="grid" onChange={() => {}} options={OPTIONS} disabled />`}
      >
        <RadioGroup value="grid" onChange={() => undefined} options={OPTIONS} disabled />
        <Text size="sm" tone="muted">
          整组禁用后仍能读出当前选中项
        </Text>
      </Demo>

      <PropsTable
        rows={[
          { name: 'options', type: 'RadioOption[]', required: true, desc: '{ value, label, disabled? }' },
          { name: 'value', type: 'string', required: true, desc: '当前选中值' },
          { name: 'onChange', type: '(value: string) => void', required: true, desc: '选择回调' },
          { name: 'direction', type: "'row' | 'column'", defaultValue: "'column'", desc: '排列方向' },
          { name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用整组' },
        ]}
      />
    </Section>
  )
}