import React from 'react';
import { DatePicker, Form, Input, Modal, Select, type FormInstance } from 'antd';
import { EXAM_TYPE_OPTIONS, type ClassOption, type ExamFormValues } from './types';

interface Props {
  open: boolean;
  editing: boolean;
  saving: boolean;
  form: FormInstance<ExamFormValues>;
  classes: ClassOption[];
  onCancel: () => void;
  onSubmit: () => void;
}

const ExamFormModal: React.FC<Props> = ({
  open,
  editing,
  saving,
  form,
  classes,
  onCancel,
  onSubmit,
}) => (
  <Modal
    title={editing ? '编辑考试' : '创建考试'}
    open={open}
    confirmLoading={saving}
    onCancel={onCancel}
    onOk={onSubmit}
    width={560}
  >
    <Form form={form} layout="vertical">
      <Form.Item
        name="examType"
        label="考试类型"
        rules={[{ required: true, message: '请选择考试类型' }]}
      >
        <Select options={EXAM_TYPE_OPTIONS} placeholder="请选择" />
      </Form.Item>
      <Form.Item
        name="examName"
        label="考试名称"
        rules={[{ required: true, message: '请输入考试名称' }]}
      >
        <Input placeholder="如：2026 年 7 月月考" />
      </Form.Item>
      <Form.Item name="subject" label="科目" rules={[{ required: true, message: '请输入科目' }]}>
        <Input placeholder="如：数学" />
      </Form.Item>
      <Form.Item
        name="examDate"
        label="考试日期"
        rules={[{ required: true, message: '请选择考试日期' }]}
      >
        <DatePicker style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item
        name="classId"
        label="考试班级"
        rules={[{ required: true, message: '请选择考试班级' }]}
      >
        <Select
          showSearch
          optionFilterProp="label"
          placeholder="选择在读班级"
          options={classes
            .filter((item) => !item.isArchived)
            .map((item) => ({ value: item.id, label: item.name }))}
        />
      </Form.Item>
    </Form>
  </Modal>
);

export default ExamFormModal;