import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/stores/themeConfig';
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
class TransitionModel extends PolylineEdgeModel {
  static extendKey = 'TransitionModel';
  getEdgeStyle (): {
    [x: string]: any;
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    } {
    const style = super.getEdgeStyle()
    // 设置样式
    if(themeConfig.value.isIsDark){
      style.stroke = "#ccc";
    }else{
      style.stroke = "#3C50E0";
    }
    // style.stroke = "#ccc";
    if (this.properties.state === 'active') {
      style.stroke = '#00ff00'
    } else if (this.properties.state === 'history') {
      style.stroke = '#ff0000'
    }
    return style
  }
  getTextStyle() {
    const style = super.getTextStyle();
    if(themeConfig.value.isIsDark) { // @ts-ignore
      style.background.fill = "transparent";
    }
    return style;
  }
}

class TransitionView extends PolylineEdge {
  static extendKey = 'TransitionEdge';
}

const Transition = {
  type: 'hotline:transition',
  view: TransitionView,
  model: TransitionModel
}

export { TransitionView, TransitionModel }
export default Transition
