import FieldGrid from './field-grid'
import { useState } from 'react'
import { NumberField } from '@react-spectrum/s2/NumberField'
import { Slider } from '@react-spectrum/s2/Slider'
import { RangeSlider } from '@react-spectrum/s2/RangeSlider'
import { DateField } from '@react-spectrum/s2/DateField'
import { TimeField } from '@react-spectrum/s2/TimeField'
import { DatePicker } from '@react-spectrum/s2/DatePicker'
import { DateRangePicker } from '@react-spectrum/s2/DateRangePicker'
import { Calendar } from '@react-spectrum/s2/Calendar'
import { RangeCalendar, type DateRange } from '@react-spectrum/s2/RangeCalendar'
import styles from './form-examples.module.css'

export default function DateNumberFields({ disabled }: { disabled: boolean }) {
  const [day, setDay] = useState('')
  const [range, setRange] = useState<DateRange | null>(null)
  return (
    <>
      <section className={styles.section} aria-labelledby="number-fields-title">
        <h2 id="number-fields-title">数字与滑块</h2>
        <FieldGrid>
          <NumberField name="quantity" label="数量" defaultValue={2} minValue={1} maxValue={20} step={1} description="范围 1–20，支持步进按钮。" />
          <NumberField name="budget" label="预算" defaultValue={1000} minValue={0} step={100} formatOptions={{ style: 'currency', currency: 'CNY' }} />
          <NumberField name="ratio" label="百分比" defaultValue={0.5} minValue={0} maxValue={1} step={0.05} formatOptions={{ style: 'percent' }} />
          <Slider name="volume" label="音量" defaultValue={40} minValue={0} maxValue={100} />
          <RangeSlider startName="priceMin" endName="priceMax" label="价格区间" defaultValue={{ start: 20, end: 80 }} minValue={0} maxValue={100} />
        </FieldGrid>
      </section>
      <section className={styles.section} aria-labelledby="date-fields-title">
        <h2 id="date-fields-title">日期与时间</h2>
        <FieldGrid>
          <DateField name="date" label="分段日期输入" />
          <TimeField name="time" label="时间输入" hourCycle={24} granularity="minute" />
          <DatePicker name="appointment" label="日期选择器" />
          <DatePicker name="appointmentTime" label="日期和时间" granularity="minute" hourCycle={24} />
          <DateRangePicker startName="tripStart" endName="tripEnd" label="日期范围" />
        </FieldGrid>
        <div className={styles.calendars}>
          <div className={styles.stack}><span id="calendar-label">独立日历</span><Calendar isDisabled={disabled} aria-labelledby="calendar-label" onChange={(value) => setDay(value?.toString() ?? '')} /><input type="hidden" name="calendar" value={day} /></div>
          <div className={styles.stack}><span id="range-calendar-label">独立范围日历</span><RangeCalendar isDisabled={disabled} aria-labelledby="range-calendar-label" value={range} onChange={setRange} /><input type="hidden" name="calendarStart" value={range?.start.toString() ?? ''} /><input type="hidden" name="calendarEnd" value={range?.end.toString() ?? ''} /></div>
        </div>
      </section>
    </>
  )
}