import { useLayoutEffect, useRef, useState } from 'react'
import { Form } from '@react-spectrum/s2/Form'
import { Button, ButtonGroup } from '@react-spectrum/s2/ButtonGroup'
import { Picker, PickerItem } from '@react-spectrum/s2/Picker'
import { Switch } from '@react-spectrum/s2/Switch'
import { Checkbox } from '@react-spectrum/s2/Checkbox'
import TextFields from './text-fields'
import SelectionFields from './selection-fields'
import DateNumberFields from './date-number-fields'
import ColorFileFields from './color-file-fields'
import styles from './form-examples.module.css'

function DemoForm({ onReset }: { onReset: () => void }) {
  const containerRef = useRef<HTMLDivElement>(null)
  const [isCompact, setIsCompact] = useState(false)
  const [size, setSize] = useState<'S' | 'M' | 'L' | 'XL'>('M')
  const [sideLabels, setSideLabels] = useState(false)
  const [disabled, setDisabled] = useState(false)
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [result, setResult] = useState<Record<string, string | string[]> | null>(null)

  useLayoutEffect(() => {
    const container = containerRef.current
    if (!container) return
    const update = () => setIsCompact(container.clientWidth < 560)
    update()
    const observer = new ResizeObserver(update)
    observer.observe(container)
    return () => observer.disconnect()
  }, [])

  const useSideLabels = sideLabels && !isCompact

  return (
    <div ref={containerRef}>
      <div className={styles.controls}>
        <Picker label="控件尺寸" selectedKey={size} onSelectionChange={(key) => { if (key === 'S' || key === 'M' || key === 'L' || key === 'XL') setSize(key) }}>
          <PickerItem id="S">S</PickerItem><PickerItem id="M">M</PickerItem><PickerItem id="L">L</PickerItem><PickerItem id="XL">XL</PickerItem>
        </Picker>
        <Switch isSelected={sideLabels} onChange={setSideLabels}>标签放在侧边</Switch>
        <Switch isSelected={disabled} onChange={setDisabled}>禁用表单</Switch>
      </div>
      {sideLabels && isCompact && <p className={styles.layoutHint}>当前宽度较窄，已自动使用顶部标签。</p>}
      <Form UNSAFE_className={`${styles.form}${useSideLabels ? ` ${styles.sideLabels}` : ''}`} size={size} isDisabled={disabled} labelPosition={useSideLabels ? 'side' : 'top'} necessityIndicator="label"
        validationBehavior="native" validationErrors={errors}
        onReset={(event) => { event.preventDefault(); onReset() }}
        onSubmit={(event) => {
          event.preventDefault()
          const data = new FormData(event.currentTarget)
          if (data.get('username') === 'admin') {
            setErrors({ username: '该用户名已被占用，请换一个。（本地模拟业务校验）' })
            setResult(null)
            return
          }
          setErrors({})
          const entries = [...new Set(data.keys())].map((key) => {
            const values = data.getAll(key).map((value) => typeof value === 'string' ? value : value.name)
            return [key, key === 'password' && values[0] ? '••••••••' : values.length === 1 ? values[0] : values]
          })
          setResult(Object.fromEntries(entries))
        }}>
        <fieldset className={styles.fields} disabled={disabled} inert={disabled}>
          <legend className={styles.srOnly}>Spectrum 表单示例</legend>
          <TextFields />
          <SelectionFields disabled={disabled} />
          <DateNumberFields disabled={disabled} />
          <ColorFileFields disabled={disabled} />
          <section className={styles.section} aria-labelledby="submit-title">
            <h2 id="submit-title">校验与提交</h2>
            <p>用户名和邮箱为必填项。可以直接提交，体验错误提示和焦点定位。</p>
            <Checkbox name="agreement" value="accepted" isRequired>我已了解这是本地表单示例</Checkbox>
            <ButtonGroup>
              <Button type="submit" variant="primary">提交并预览</Button>
              <Button type="reset" variant="secondary">重置全部</Button>
            </ButtonGroup>
          </section>
        </fieldset>
      </Form>
      <section className={styles.result} aria-labelledby="result-title">
        <h2 id="result-title">提交结果</h2>
        <p role="status">{result ? '校验通过，以下为本次提交的数据。' : '填写表单并提交后，在这里查看结果。'}</p>
        {result && <pre tabIndex={0}>{JSON.stringify(result, null, 2)}</pre>}
      </section>
    </div>
  )
}

export default function FormExamples() {
  const [version, setVersion] = useState(0)
  return <DemoForm key={version} onReset={() => setVersion((value) => value + 1)} />
}