import {EDGE, PORT} from "../shape/gengral-config";
import {useEventListener} from '@vueuse/core'
import edgeRemoveIcon from '../svgs/edge-remove.svg';
import edgeRemoveHoverIcon from '../svgs/edge-remove-hover.svg';

const {stroke: lineColor} = EDGE;
const EDGE_REMOVE_ICON_CLASS = 'workflow-editor-edge-remove-icon';

export class WorkflowEdgeToolbar {
  graph;
  edge;
  listener;

  constructor(graph) {
    this.graph = graph;
  }

  show(edge) {
    // 重置
    this.reset(edge);
    // 设置颜色
    this.changeEdgeColor(lineColor.hover);
    // 添加所有工具
    this.addTools();
  }

  hide() {
    // 设置颜色
    this.changeEdgeColor(lineColor._default);
    // 移除所有工具
    this.removeTools();
    // 清除
    this.clear();
  }

  clear() {
    if (this.listener) {
      this.listener();
      if (this.listener) {
        delete this.listener;
      }
    }
    delete this.edge;
  }

  removeTools() {
    if (!this.edge) {
      return;
    }

    // 移除路径点
    this.edge.removeTool('vertices');
    // 移除线段
    this.edge.removeTool('segments');
    // 移除删除按钮
    this.edge.removeTool('button');
    // 移除source箭头
    this.edge.removeTool('source-arrowhead');
    // 移除target箭头
    this.edge.removeTool('target-arrowhead');
  }

  changeEdgeColor(color) {
    if (!this.edge) {
      return;
    }
    this.edge.setAttrByPath('line/stroke', color);
  }

  addTools() {
    if (!this.edge) {
      return;
    }

    this.edge.addTools([
      {
        // 路径点
        name: 'vertices',
        args: {
          attrs: {
            r: 3,
            'stroke-width': 0,
            fill: '#666666',
          },
        },
      },
      {
        // 线段
        name: 'segments',
        args: {
          attrs: {
            width: 8,
            height: 4,
            x: -4,
            y: -2,
            rx: 1,
            ry: 1,
            'stroke-width': 0,
            fill: '#666666',
          },
        },
      },
      {
        // 删除按钮
        name: 'button',
        args: {
          distance: '50%',
          markup: [
            {
              tagName: 'image',
              className: EDGE_REMOVE_ICON_CLASS,
              attrs: {
                x: -12,
                y: -12,
                width: 24,
                height: 24,
                'xlink:href': edgeRemoveIcon,
                cursor: 'pointer',
              },
            },
          ],
          onClick: ({cell}) => {
            this.graph.removeCell(cell);
          },
        },
      },
      {
        // source箭头
        name: 'source-arrowhead',
        args: {
          tagName: 'circle',
          attrs: {
            stroke: lineColor.hover,
            'stroke-width': 1,
            r: PORT.r,
            fill: lineColor.hover,
          },
        },
      },
      {
        // target箭头
        name: 'target-arrowhead',
        args: {
          attrs: {
            d: 'M -11.5 -7 2 0 -11.5 7 Z',
            'stroke-width': 0,
            fill: lineColor.hover,
          },
        },
      },
    ]);
  }

  reset(edge) {
    this.edge = edge;


    this.listener = useEventListener(this.graph.container, 'mousemove', (e) => {
      if (!e.target) {
        return;
      }

      const el = e.target;
      const className = el.getAttribute('class');

      if (className !== EDGE_REMOVE_ICON_CLASS) {
        const list = this.graph.container.querySelectorAll < SVGElement > (`.${EDGE_REMOVE_ICON_CLASS}`);
        if (list.length === 0) {
          return;
        }
        return;
      }

      if (edgeRemoveHoverIcon === el.getAttribute('xlink:href')) {
        return;
      }
      el.setAttribute('xlink:href', edgeRemoveHoverIcon);

    })

  }

}
