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

const FormItem = Form.Item;
const Option = Select.Option;

interface TestCaseModalProps {
  design: Record<string, any>;
  visible: boolean;
  operationIdent: string;
  editingData?: any;
  onCancel: () => void;
  onOk: (values: any) => void;
}

const dict = [
  {
    label: '通过用例',
    value: '通过用例'
  },
  {
    label: '失败用例',
    value: '失败用例'
  },
  {
    label: '参数有误',
    value: '参数有误'
  },
  {
    label: '数据为空',
    value: '数据为空'
  },
  {
    label: '缺少参数',
    value: '缺少参数'
  },
  {
    label: '记录不存在',
    value: '记录不存在'
  }
];

const TestCaseModal: React.FC<TestCaseModalProps> = ({ design, visible, operationIdent, editingData, onCancel, onOk }) => {
  const [testCaseFunctions, setTestCaseFunctions] = useState(null);
  const [form] = Form.useForm();

  const handleOk = async () => {
    try {
      const formValues = await form.validate();

      // 构造完整的数据结构，包含原始字段信息和用户输入的值
      const result = {
        ...(editingData?.id && { id: editingData.id }), // 如果是编辑模式，保留id
        testCaseName: formValues.testCaseName,
        operation: operationIdent,
        expectDataIns: testCaseFunctions.parameters.map((param, index) => ({
          ident: param.ident,
          type: param.type,
          generic: param.generic,
          desc: param.desc,
          // 用户输入的值
          value: formValues[`parameters_${index}`] || ''
        })),
        expectDataOuts: testCaseFunctions.responses.map((resp, index) => ({
          ident: resp.ident,
          type: resp.type,
          generic: resp.generic,
          desc: resp.desc,
          // 用户输入的值
          value: formValues[`responses_${index}`] || ''
        })),
      };

      onOk(result);
      form.resetFields();
    } catch (e) {
      console.log(e);
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  useEffect(() => {
    setTestCaseFunctions(design.find(item => item.ident === operationIdent));
  }, [visible, operationIdent, design]);

  // 回显编辑数据
  useEffect(() => {
    if (editingData && testCaseFunctions) {
      const formData: any = {
        testCaseName: editingData.testCaseName
      };

      // 回显输入参数
      editingData.expectDataIns?.forEach((param: any, index: number) => {
        formData[`parameters_${index}`] = param.value;
      });

      // 回显输出参数
      editingData.expectDataOuts?.forEach((resp: any, index: number) => {
        formData[`responses_${index}`] = resp.value;
      });

      form.setFieldsValue(formData);
    } else {
      form.resetFields();
    }
  }, [editingData, testCaseFunctions, form]);

  return (
    <Modal
      title={editingData ? "编辑测试用例" : "配置测试用例"}
      visible={visible}
      onCancel={handleCancel}
      autoFocus={false}
      focusLock={true}
      style={{ width: 1000 }}
      footer={
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
          <Button onClick={handleCancel}>取消</Button>
          <Button type="primary" onClick={handleOk}>
            确定
          </Button>
        </div>
      }
    >
      <div className={styles['modal-content']}>
        <div className={styles['modal-header']}>
          <span className={styles['header-label']}>接口:</span>
          <span className={styles['header-value']}>{operationIdent}</span>
        </div>

        <Form form={form} layout="vertical" autoComplete="off">
          <FormItem
            label="用例名称"
            field="testCaseName"
            rules={[{ required: true, message: '请输入用例名称' }]}
          >
            <Select placeholder="请输入或选择测试用例" allowCreate allowClear>
              {dict.map((option, index) => (
                <Option key={index} value={option.value}>
                  {option.label}
                </Option>
              ))}
            </Select>
          </FormItem>

          <div className={styles['section-title']}>输入参数:</div>
          <div className={styles['params-table']}>
            <div className={styles['table-header']}>
              <div className={styles['col-index']}></div>
              <div className={styles['col-name']}>名称</div>
              <div className={styles['col-param-type']}>参数类型</div>
              <div className={styles['col-data-type']}>数据类型</div>
              <div className={styles['col-value']}>参数值</div>
            </div>
            {testCaseFunctions && testCaseFunctions.parameters.map((item, index) => (
              <div className={styles['table-row']} key={index}>
                <div className={styles['col-index']}>{index + 1}</div>
                <div className={styles['col-name']}>{item.ident}</div>
                <div className={styles['col-param-type']}>{item.type}</div>
                <div className={styles['col-data-type']}>{item.generic || '-'}</div>
                <div className={styles['col-value']}>
                  <FormItem field={`parameters_${index}`} noStyle>
                    <Input placeholder="请输入参数值" />
                  </FormItem>
                </div>
              </div>
            ))}
          </div>

          <div className={styles['section-title']}>输出参数:</div>
          <div className={styles['params-table']}>
            <div className={styles['table-header']}>
              <div className={styles['col-index']}></div>
              <div className={styles['col-name']}>名称</div>
              <div className={styles['col-param-type']}>参数类型</div>
              <div className={styles['col-data-type']}>数据类型</div>
              <div className={styles['col-value']}>参数值</div>
            </div>
            {testCaseFunctions && testCaseFunctions.responses.map((item, index) => (
              <div className={styles['table-row']} key={index}>
                <div className={styles['col-index']}>{index + 1}</div>
                <div className={styles['col-name']}>{item.ident}</div>
                <div className={styles['col-param-type']}>{item.type}</div>
                <div className={styles['col-data-type']}>{item.generic || '-'}</div>
                <div className={styles['col-value']}>
                  <FormItem field={`responses_${index}`} noStyle>
                    <Input placeholder="请输入参数值" />
                  </FormItem>
                </div>
              </div>
            ))}
          </div>
        </Form>
      </div>
    </Modal>
  );
};

export default TestCaseModal;
