import React, { useEffect } from 'react';
import { Modal, Form, Input, Upload, Button } from '@arco-design/web-react';
import styles from './style/editInstanceModal.module.less';

const FormItem = Form.Item;
const { TextArea } = Input;

interface EditInstanceModalProps {
  visible: boolean;
  instanceData: any;
  onCancel: () => void;
  onOk: (values: any) => void;
}

const EditInstanceModal: React.FC<EditInstanceModalProps> = ({
                                                               visible,
                                                               instanceData,
                                                               onCancel,
                                                               onOk
                                                             }) => {
  const [form] = Form.useForm();

  // 当 instanceData 变化时，更新表单数据
  useEffect(() => {
    if (instanceData && visible) {
      form.setFieldsValue({
        name: instanceData.name || '',
        desc: instanceData.desc || ''
      });
    }
  }, [instanceData, visible, form]);

  // 处理确定
  const handleOk = async () => {
    try {
      const values = await form.validate();
      onOk(values);
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  // 处理取消
  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      title="编辑实例信息"
      visible={visible}
      onCancel={handleCancel}
      onOk={handleOk}
      style={{ width: 600 }}
    >
      <Form
        form={form}
        layout="vertical"
        autoComplete="off"
      >
        <FormItem
          label="实例名称:"
          field="name"
          rules={[{ required: true, message: '请输入实例名称' }]}
        >
          <Input placeholder="请输入实例名称" />
        </FormItem>

        <FormItem
          label="实例描述:"
          field="desc"
        >
          <TextArea
            placeholder="请输入实例描述"
            autoSize={{ minRows: 3, maxRows: 6 }}
          />
        </FormItem>

        {/*<FormItem label="图标:">*/}
        {/*  <div className={styles['upload-wrapper']}>*/}
        {/*    <Upload*/}
        {/*      accept="image/*"*/}
        {/*      showUploadList={false}*/}
        {/*    >*/}
        {/*      <div className={styles['upload-area']}>*/}
        {/*        <div className={styles['upload-icon']}>+</div>*/}
        {/*      </div>*/}
        {/*    </Upload>*/}
        {/*  </div>*/}
        {/*</FormItem>*/}
      </Form>
    </Modal>
  );
};

export default EditInstanceModal;