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

export function Checkboxes() {
  const [remember, setRemember] = useState(true)
  const [notify, setNotify] = useState(false)
  const [selected, setSelected] = useState<string[]>(['design'])

  const toggle = (value: string) =>
    setSelected((current) =>
      current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
    )

  return (
    <Section
      id="checkbox"
      title="复选框"
      api="Checkbox"
      desc="多选与「记住我 / 订阅」这类需要确认的选项。用原生 input[type=checkbox]，键盘、读屏、点击文字都可勾选。"
    >
      <Demo
        title="基础用法"
        desc="label 同时作为可见文字和无障碍名称；受控写法与 Switch 一致。"
        layout="column"
        code={`<Checkbox checked={remember} onChange={setRemember} label="记住登录状态" />
<Checkbox checked={notify} onChange={setNotify} label="有新内容时提醒我" />`}
      >
        <Checkbox checked={remember} onChange={setRemember} label="记住登录状态" />
        <Checkbox checked={notify} onChange={setNotify} label="有新内容时提醒我" />
      </Demo>

      <Demo
        title="多选组"
        desc="一列用 Space 排列；组本身不需要额外容器，用方向 + 间距控制即可。"
        layout="column"
        code={`{options.map((item) => (
  <Checkbox
    key={item.value}
    checked={selected.includes(item.value)}
    onChange={() => toggle(item.value)}
    label={item.label}
  />
))}`}
      >
        <Space direction="column" gap="sm" align="start">
          {[
            { value: 'design', label: '设计资源' },
            { value: 'dev', label: '开发工具' },
            { value: 'movie', label: '电影片单' },
          ].map((item) => (
            <Checkbox
              key={item.value}
              checked={selected.includes(item.value)}
              onChange={() => toggle(item.value)}
              label={item.label}
            />
          ))}
        </Space>
        <Text size="sm" tone="muted">
          已选 {selected.length} 项
        </Text>
      </Demo>

      <Demo
        title="禁用"
        desc="禁用态下点击文字也不会改变值；只降对比度，不隐藏。"
        code={`<Checkbox checked onChange={() => {}} disabled label="不可修改（已选）" />`}
      >
        <Space gap="lg" wrap>
          <Checkbox checked onChange={() => undefined} disabled label="不可修改（已选）" />
          <Checkbox checked={false} onChange={() => undefined} disabled label="不可修改（未选）" />
        </Space>
      </Demo>

      <PropsTable
        rows={[
          { name: 'checked', type: 'boolean', required: true, desc: '受控状态' },
          { name: 'onChange', type: '(checked: boolean) => void', required: true, desc: '勾选回调' },
          { name: 'label', type: 'ReactNode', required: true, desc: '可见文字，同时作为无障碍名称' },
          { name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用' },
        ]}
      />
    </Section>
  )
}