import { computed, ComputedRef } from 'vue';
import { Edge } from '@vue-flow/core';

type EdgeType = 'default' | 'straight' | 'step' | 'smoothstep' | 'simplebezier';

/**
 * 边样式计算Hook
 * 根据边类型、链路类型、标签等计算最终样式
 */
export function useEdgeStyles(edges: Edge[], edgeType: EdgeType): ComputedRef<Edge[]> {
  const styledEdges = computed(() => {
    return edges.map((edge) => {
      const isVirtual = edge.data?.type === 'virtual';
      const hasLabel = edge.data?.label && edge.data.label.trim() !== '';

      return {
        ...edge,
        type: edgeType, // 使用全局设置的边类型
        label: hasLabel ? edge.data?.label : undefined,
        animated: true, // 流动效果
        style: {
          stroke: isVirtual
            ? '#F57C00' // 虚拟链路使用橙色
            : '#1976D2', // 物理链路使用蓝色
          strokeWidth: 2,
          strokeDasharray: isVirtual ? '5,5' : undefined, // 虚拟链路使用虚线
        },
        labelStyle: hasLabel
          ? {
              fill: '#333',
              fontWeight: 600,
              fontSize: 12,
            }
          : undefined,
        labelBgStyle: hasLabel
          ? {
              fill: '#fff',
              fillOpacity: 0.9,
            }
          : undefined,
      };
    });
  });

  return styledEdges;
}
