import { Form, Input, Select } from 'antd'
import { GRADE_OPTIONS, SCHOOL_LEVEL_LABELS } from '../constants/school'
import type { SchoolLevel } from '../types'

export interface StudentFormValues {
  name: string
  school_level: SchoolLevel
  school_name?: string
  grade?: string
  class_name?: string
}

interface Props {
  form: ReturnType<typeof Form.useForm<StudentFormValues>>[0]
}

export default function StudentFormFields({ form }: Props) {
  const schoolLevel = Form.useWatch('school_level', form) as SchoolLevel | undefined

  return (
    <>
      <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
        <Input placeholder="学生姓名" />
      </Form.Item>
      <Form.Item name="school_name" label="学校">
        <Input placeholder="如：XX中学" />
      </Form.Item>
      <Form.Item name="school_level" label="学段" rules={[{ required: true }]}>
        <Select
          options={Object.entries(SCHOOL_LEVEL_LABELS).map(([value, label]) => ({ value, label }))}
          onChange={() => form.setFieldValue('grade', undefined)}
        />
      </Form.Item>
      <Form.Item name="grade" label="年级" rules={[{ required: true, message: '请选择年级' }]}>
        <Select
          allowClear
          placeholder={schoolLevel === 'senior_high' ? '请选择高几' : '请选择初几'}
          options={(GRADE_OPTIONS[schoolLevel || 'junior_high'] || []).map((item) => ({
            value: item.value,
            label: item.label,
          }))}
        />
      </Form.Item>
      <Form.Item name="class_name" label="班级">
        <Input placeholder="如：3 或 3班" />
      </Form.Item>
    </>
  )
}
