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

const OPTIONS = [
  { value: 'new', label: '最近更新' },
  { value: 'hot', label: '最热门' },
  { value: 'name', label: '按名称' },
  { value: 'none', label: '（暂不可用）', disabled: true },
]

export function Selects() {
  const [sort, setSort] = useState('new')
  const [kind, setKind] = useState<string | undefined>(undefined)

  return (
    <Section
      id="select"
      title="下拉选择"
      api="Select"
      desc="受控的单值选择：触发器是原生 button，展开后是 listbox；支持点击外部关闭、Esc、↑↓ 移动、Enter 选择。"
    >
      <Demo
        title="基础用法"
        desc="不传 value 时显示 placeholder；禁用的选项不可点、不可选。"
        code={`const [sort, setSort] = useState('new')

<Select options={OPTIONS} value={sort} onChange={setSort} />`}
      >
        <Space gap="md" wrap>
          <Select options={OPTIONS} value={sort} onChange={setSort} />
          <Text size="sm" tone="muted">
            当前：{OPTIONS.find((option) => option.value === sort)?.label}
          </Text>
        </Space>
      </Demo>

      <Demo
        title="占位与禁用"
        desc="placeholder 只在没有选中值时出现；整个控件 disabled 时不可展开。"
        code={`<Select options={OPTIONS} value={kind} onChange={setKind} placeholder="选择类型" />
<Select options={OPTIONS} value={kind} onChange={setKind} disabled />`}
      >
        <Space gap="md" wrap>
          <Select options={OPTIONS} value={kind} onChange={setKind} placeholder="选择类型" />
          <Select options={OPTIONS} value={kind} onChange={setKind} disabled />
        </Space>
      </Demo>

      <PropsTable
        rows={[
          { name: 'options', type: 'SelectOption[]', required: true, desc: '{ value, label, disabled? }' },
          { name: 'value', type: 'string', desc: '当前值' },
          { name: 'onChange', type: '(value: string) => void', required: true, desc: '选择回调' },
          { name: 'placeholder', type: 'string', defaultValue: "'请选择'", desc: '未选中时的文案' },
          { name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用整个控件' },
        ]}
      />
    </Section>
  )
}