import { Form, Input, Modal } from 'antd';
import React, { useEffect } from 'react';

interface DictItemModalProps {
  // 模态框是否可见
  visible: boolean;
  // 是否为编辑模式
  isEdit: boolean;
  // 编辑时的字典项数据
  editingData?: any;
  // 当前选中的字典
  selectedDict?: any;
  // 取消回调
  onCancel: () => void;
  // 确认回调
  onOk: (values: any) => Promise<void>;
}

const DictItemModal: React.FC<DictItemModalProps> = ({
  visible,
  isEdit,
  editingData,
  selectedDict,
  onCancel,
  onOk,
}) => {
  const [form] = Form.useForm();

  // 当模态框打开或编辑数据变化时，重置或设置表单值
  useEffect(() => {
    if (visible) {
      if (isEdit && editingData) {
        // 编辑模式，设置表单值为编辑数据
        form.setFieldsValue(editingData);
      } else {
        // 新增模式，重置表单
        form.resetFields();
      }
    }
  }, [visible, isEdit, editingData, form]);

  // 表单提交处理
  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      await onOk(values);
    } catch (error) {
      // 表单验证失败，不关闭模态框
    }
  };

  return (
    <Modal
      title={
        isEdit
          ? '编辑字典项'
          : `添加字典项 - ${selectedDict?.title || '未选择字典'}`
      }
      open={visible}
      onOk={handleOk}
      onCancel={onCancel}
      destroyOnClose
    >
      <Form form={form} layout="vertical">
        <Form.Item
          label="名称"
          name="name"
          rules={[{ required: true, message: '请输入名称' }]}
        >
          <Input placeholder="名称 (e.g., zyn)" />
        </Form.Item>
        <Form.Item
          label="标题"
          name="title"
          rules={[{ required: true, message: '请输入标题' }]}
        >
          <Input placeholder="标题 (e.g., ZYN)" />
        </Form.Item>
        <Form.Item label="中文标题" name="titleCN">
          <Input placeholder="中文标题 (e.g., 品牌)" />
        </Form.Item>
        <Form.Item label="简称 (可选)" name="shortName">
          <Input placeholder="简称 (可选)" />
        </Form.Item>
        <Form.Item label="图片 (可选)" name="image">
          <Input placeholder="图片链接 (可选)" />
        </Form.Item>
        <Form.Item label="值 (可选)" name="value">
          <Input placeholder="值 (可选)" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default DictItemModal;