import FieldGrid from './field-grid'
import { TextField } from '@react-spectrum/s2/TextField'
import { TextArea } from '@react-spectrum/s2/TextArea'
import { SearchField } from '@react-spectrum/s2/SearchField'
import { ContextualHelp, Heading, Content } from '@react-spectrum/s2/ContextualHelp'
import styles from './form-examples.module.css'

export default function TextFields() {
  return (
    <section className={styles.section} aria-labelledby="text-fields-title">
      <h2 id="text-fields-title">文本输入</h2>
      <FieldGrid>
        <TextField name="username" label="用户名" isRequired minLength={3} maxLength={20}
          description="3–20 个字符；输入 admin 可体验提交后的业务校验。"
          contextualHelp={<ContextualHelp><Heading>用户名</Heading><Content>可使用字母、数字和下划线。</Content></ContextualHelp>}
          validate={(value) => value && !/^[a-zA-Z0-9_]+$/.test(value) ? '只能包含字母、数字和下划线。' : null} />
        <TextField name="email" label="邮箱" type="email" isRequired placeholder="name@example.com" />
        <TextField name="password" label="密码" type="password" minLength={8} description="选填，至少 8 位；提交预览中隐藏密码。" />
        <TextField name="website" label="网址" type="url" placeholder="https://example.com" />
        <TextField name="phone" label="电话" type="tel" placeholder="输入联系电话" />
        <SearchField name="keyword" label="搜索关键词" description="支持输入与一键清空。" />
        <TextArea name="bio" label="多行简介" maxLength={200} description="最多 200 个字符。" />
        <TextField name="reference" label="只读字段" value="FORM-DEMO-001" isReadOnly />
        <TextField label="禁用字段" defaultValue="不可编辑，也不参与提交" isDisabled />
      </FieldGrid>
    </section>
  )
}