import React from 'react';
import { Form, Input, Select, InputNumber, Modal, message, FormInstance } from 'antd';
import OptionCreator from './optionCreator';
import { FieldTypeOptions, GroupOptions } from './defaultFields';

type StaffFieldModalProps = {
  form: FormInstance;
  isModalVisible: boolean;
  setIsModalVisible: (visible: boolean) => void;
  editingField: any;
  isProcessing: boolean;
  handleSubmit: () => Promise<void>;
  optionFieldTypes: string[];
  showOptions: boolean;
};

const StaffFieldModal: React.FC<StaffFieldModalProps> = ({
  form,
  isModalVisible,
  setIsModalVisible,
  editingField,
  isProcessing,
  handleSubmit,
  optionFieldTypes,
  showOptions
}) => {
  return (
    <Modal
      title={editingField ? '编辑字段' : '添加字段'}
      open={isModalVisible}
      onOk={handleSubmit}
      onCancel={() => setIsModalVisible(false)}
      confirmLoading={isProcessing}
    >
      <Form
        form={form}
        layout="vertical"
      >
        <Form.Item
          name="name"
          label="字段标识"
          rules={[
            { required: true, message: '请输入字段标识' },
            { pattern: /^[a-zA-Z][a-zA-Z0-9]*$/, message: '字段标识必须以字母开头，只能包含字母和数字' }
          ]}
        >
          <Input placeholder="请输入字段标识，如：phoneNumber" />
        </Form.Item>

        <Form.Item
          name="label"
          label="字段名称"
          rules={[{ required: true, message: '请输入字段名称' }]}
        >
          <Input placeholder="请输入字段名称，如：手机号码" />
        </Form.Item>

        <Form.Item
          name="type"
          label="字段类型"
          rules={[{ required: true, message: '请选择字段类型' }]}
        >
          <Select options={FieldTypeOptions} />
        </Form.Item>

        <Form.Item
          name="options"
          label="字段选项"
          hidden={!showOptions} 
        >
          <OptionCreator
            options={form.getFieldValue('options') || []}
            onChange={(newOptions) => form.setFieldsValue({ options: newOptions })}
          />
        </Form.Item>

        <Form.Item
          name="required"
          label="是否必填"
        > 
          <Select
            options={[
              { label: '是', value: true },
              { label: '否', value: false },
            ]}
          />
        </Form.Item>

        <Form.Item
          name="group"
          label="字段分组"
        >
          <Select options={GroupOptions} allowClear />
        </Form.Item>

        <Form.Item
          name="order"
          label="显示顺序"
        >
          <InputNumber min={0} />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default StaffFieldModal;