import FieldGrid from './field-grid'
import { useState } from 'react'
import { ColorArea, parseColor } from '@react-spectrum/s2/ColorArea'
import { ColorField } from '@react-spectrum/s2/ColorField'
import { ColorSlider } from '@react-spectrum/s2/ColorSlider'
import { ColorWheel } from '@react-spectrum/s2/ColorWheel'
import { ColorSwatch, ColorSwatchPicker } from '@react-spectrum/s2/ColorSwatchPicker'
import { DropZone } from '@react-spectrum/s2/DropZone'
import { FileTrigger } from '@react-spectrum/s2/FileTrigger'
import { Button } from '@react-spectrum/s2/Button'
import styles from './form-examples.module.css'

export default function ColorFileFields({ disabled }: { disabled: boolean }) {
  const [color, setColor] = useState(() => parseColor('hsl(265, 75%, 60%)'))
  const [files, setFiles] = useState<File[]>([])
  const [fileError, setFileError] = useState('')
  return (
    <>
      <section className={styles.section} aria-labelledby="color-fields-title">
        <h2 id="color-fields-title">颜色选择</h2>
        <p>输入框、色板、色轮和滑块共享同一个颜色值。</p>
        <FieldGrid>
          <ColorField label="颜色值" value={color} onChange={(next) => { if (next) setColor(next) }} />
          <ColorSlider isDisabled={disabled} label="色相" channel="hue" colorSpace="hsl" value={color} onChange={setColor} />
          <ColorSlider isDisabled={disabled} label="透明度" channel="alpha" value={color} onChange={setColor} />
          <div className={styles.stack}>
            <span>预设色板</span>
            <ColorSwatchPicker value={color} onChange={setColor}>
              <ColorSwatch color="#8b5cf6" /><ColorSwatch color="#3b82f6" /><ColorSwatch color="#22c55e" /><ColorSwatch color="#f97316" />
            </ColorSwatchPicker>
          </div>
        </FieldGrid>
        <div className={styles.calendars}>
          <div className={styles.stack}><span id="color-area-label">二维颜色面板</span><ColorArea isDisabled={disabled} aria-labelledby="color-area-label" colorSpace="hsl" xChannel="saturation" yChannel="lightness" value={color} onChange={setColor} /></div>
          <div className={styles.stack}><span id="color-wheel-label">色轮</span><ColorWheel isDisabled={disabled} aria-labelledby="color-wheel-label" value={color} onChange={setColor} /></div>
        </div>
        <input type="hidden" name="color" value={color.toString('hexa')} />
        <output className={styles.output}>{color.toString('hexa')}</output>
      </section>
      <section className={styles.section} aria-labelledby="file-fields-title">
        <h2 id="file-fields-title">文件选择与拖放</h2>
        <DropZone aria-label="附件拖放区域" getDropOperation={(types) => !disabled && types.has('Files') ? 'copy' : 'cancel'}
          onDrop={async (event) => {
            try {
              const next = await Promise.all(event.items.filter((item) => item.kind === 'file').map((item) => item.getFile()))
              setFiles(next)
              setFileError('')
            } catch {
              setFileError('无法读取文件，请重新选择。')
            }
          }}>
          <div className={styles.dropContent}>
            <p>将文件拖放到这里，或从设备中选择。</p>
            <FileTrigger allowsMultiple onSelect={(selected) => { if (selected) { setFiles(Array.from(selected)); setFileError('') } }}>
              <Button type="button" variant="secondary">选择文件</Button>
            </FileTrigger>
            <p>仅在本页预览文件信息，不上传。</p>
          </div>
        </DropZone>
        {fileError && <p role="alert">{fileError}</p>}
        <div aria-live="polite">
          {files.length ? <ul>{files.map((file, index) => <li key={`${file.name}-${index}`}>{file.name} · {Math.ceil(file.size / 1024)} KB</li>)}</ul> : <p>尚未选择文件。</p>}
        </div>
        {files.length > 0 && <Button type="button" variant="secondary" onPress={() => setFiles([])}>清空文件</Button>}
        <input type="hidden" name="files" value={JSON.stringify(files.map(({ name, size, type }) => ({ name, size, type })))} />
      </section>
    </>
  )
}