import FieldGrid from './field-grid'
import { useState } from 'react'
import { Checkbox, CheckboxGroup } from '@react-spectrum/s2/CheckboxGroup'
import { Radio, RadioGroup } from '@react-spectrum/s2/RadioGroup'
import { Switch } from '@react-spectrum/s2/Switch'
import { Picker, PickerItem } from '@react-spectrum/s2/Picker'
import { ComboBox, ComboBoxItem } from '@react-spectrum/s2/ComboBox'
import { SelectBox, SelectBoxGroup, Text, type Selection } from '@react-spectrum/s2/SelectBoxGroup'
import { SegmentedControl, SegmentedControlItem, type Key } from '@react-spectrum/s2/SegmentedControl'
import { ToggleButton, ToggleButtonGroup } from '@react-spectrum/s2/ToggleButtonGroup'
import styles from './form-examples.module.css'

export default function SelectionFields({ disabled }: { disabled: boolean }) {
  const [plan, setPlan] = useState<Selection>(new Set(['personal']))
  const [view, setView] = useState<Key>('list')
  const [format, setFormat] = useState<Selection>(new Set())
  const [favorite, setFavorite] = useState(false)
  const [partial, setPartial] = useState(true)
  const [partialSelected, setPartialSelected] = useState(false)
  return (
    <section className={styles.section} aria-labelledby="selection-fields-title">
      <h2 id="selection-fields-title">选择控件</h2>
      <FieldGrid>
        <Picker name="region" label="下拉单选" defaultSelectedKey="shanghai">
          <PickerItem id="shanghai">上海</PickerItem><PickerItem id="beijing">北京</PickerItem><PickerItem id="shenzhen">深圳</PickerItem>
        </Picker>
        <ComboBox name="language" label="可搜索下拉框" defaultItems={[{ id: 'ts', name: 'TypeScript' }, { id: 'js', name: 'JavaScript' }, { id: 'py', name: 'Python' }]}>
          {(item) => <ComboBoxItem id={item.id}>{item.name}</ComboBoxItem>}
        </ComboBox>
        <RadioGroup name="contact" label="单选组" defaultValue="email" orientation="horizontal">
          <Radio value="email">邮件</Radio><Radio value="phone">电话</Radio>
        </RadioGroup>
        <CheckboxGroup name="interests" label="复选框组" defaultValue={['design']}>
          <Checkbox value="design">设计</Checkbox><Checkbox value="development">开发</Checkbox><Checkbox value="research">研究</Checkbox>
        </CheckboxGroup>
        <div className={styles.stack}>
          <Checkbox name="newsletter" value="yes">订阅邮件</Checkbox>
          <Checkbox name="partialSelection" value="yes" isIndeterminate={partial} isSelected={partialSelected} onChange={(value) => { setPartial(false); setPartialSelected(value) }}>部分选中状态</Checkbox>
          <Switch name="notifications" value="on" defaultSelected>开启通知</Switch>
        </div>
        <div className={styles.stack}>
          <span id="view-label">分段选择</span>
          <SegmentedControl aria-labelledby="view-label" selectedKey={view} onSelectionChange={setView}>
            <SegmentedControlItem isDisabled={disabled} id="list">列表</SegmentedControlItem><SegmentedControlItem isDisabled={disabled} id="grid">网格</SegmentedControlItem>
          </SegmentedControl>
          <input type="hidden" name="view" value={String(view)} />
        </div>
        <div className={styles.stack}>
          <span id="format-label">切换按钮组</span>
          <ToggleButtonGroup aria-labelledby="format-label" selectionMode="multiple" selectedKeys={format} onSelectionChange={setFormat}>
            <ToggleButton id="bold">粗体</ToggleButton><ToggleButton id="italic">斜体</ToggleButton>
          </ToggleButtonGroup>
          <input type="hidden" name="format" value={JSON.stringify(format === 'all' ? ['bold', 'italic'] : [...format])} />
          <ToggleButton isSelected={favorite} onChange={setFavorite}>收藏</ToggleButton>
          <input type="hidden" name="favorite" value={String(favorite)} />
        </div>
      </FieldGrid>
      <div className={styles.stack}>
        <span id="plan-label">卡片选择</span>
        <SelectBoxGroup isDisabled={disabled} aria-labelledby="plan-label" selectedKeys={plan} onSelectionChange={setPlan}>
          <SelectBox id="personal" textValue="个人版"><Text slot="label">个人版</Text><Text slot="description">个人工作空间</Text></SelectBox>
          <SelectBox id="team" textValue="团队版"><Text slot="label">团队版</Text><Text slot="description">多人协作空间</Text></SelectBox>
        </SelectBoxGroup>
        <input type="hidden" name="plan" value={plan === 'all' ? 'all' : [...plan].join(',')} />
      </div>
    </section>
  )
}