import React, { useState } from 'react';
import { Modal, Form, Input, InputNumber, Radio } from 'antd';
import { Edge } from '@antv/x6';
import { ConditionType, EdgeCondition } from '../types';

interface ExpressionModalProps {
    visible: boolean;
    edge: Edge;
    onOk: (condition: EdgeCondition) => void;
    onCancel: () => void;
}

const ExpressionModal: React.FC<ExpressionModalProps> = ({
    visible,
    edge,
    onOk,
    onCancel
}) => {
    const [form] = Form.useForm();
    const currentCondition = edge.getProp('condition') as EdgeCondition;

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

    return (
        <Modal
            title="编辑条件"
            open={visible}
            onOk={handleOk}
            onCancel={onCancel}
            width={600}
        >
            <Form
                form={form}
                layout="vertical"
                initialValues={{
                    type: currentCondition?.type || 'EXPRESSION',
                    expression: currentCondition?.expression || '',
                    priority: currentCondition?.priority || 10
                }}
            >
                <Form.Item
                    name="type"
                    label="条件类型"
                    rules={[{ required: true }]}
                >
                    <Radio.Group>
                        <Radio value="EXPRESSION">表达式</Radio>
                        <Radio value="DEFAULT">默认路径</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item
                    noStyle
                    shouldUpdate={(prevValues, currentValues) => prevValues.type !== currentValues.type}
                >
                    {({ getFieldValue }) => {
                        const type = getFieldValue('type');
                        return type === 'EXPRESSION' ? (
                            <Form.Item
                                name="expression"
                                label="条件表达式"
                                rules={[{ required: true, message: '请输入条件表达式' }]}
                                extra="支持使用 ${变量名} 引用流程变量，例如：${amount} > 1000"
                            >
                                <Input.TextArea
                                    placeholder="请输入条件表达式"
                                    rows={4}
                                />
                            </Form.Item>
                        ) : null;
                    }}
                </Form.Item>

                <Form.Item
                    name="priority"
                    label="优先级"
                    rules={[{ required: true }]}
                    extra="数字越小优先级越高"
                >
                    <InputNumber min={1} max={999} />
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default ExpressionModal;