import BaseComponentRender from "../component/BaseComponentRender";
import { Graph, Node } from "@antv/x6";

import FlowNode from "./node";

/**
 * 规则编排的画布
 */
export default class FlowGraph extends BaseComponentRender {
  public $graph: Graph | undefined;
  public $nodes: Node[] = [] as Node[];
  public translate = {
    x: 0,
    y: 0
  };

  private initGraph(options: Record<string, any>) {
    console.log("options", options);
    this.$graph = new Graph(options);
    // this.$graph = new Graph({});
    this.initEvent();
  }

  private initEvent() {
    if (this.$graph) {
      this.$graph.on("node:selected", ({ node }) => {
        console.log(node);
        // 选中，将focus变为node组件
        this.emit("selectNode", node.id);
      });

      this.$graph.on("node:unselected", () => {
        // 取消选中，需要将focus重新变为graph
      });

      this.$graph.on("translate", ({ tx, ty }) => {
        // 画布平移事件，平移距离用于计算拖拽放置的初始位置
        this.translate.x = tx;
        this.translate.y = ty;
      });
    }
  }

  // private bindKeys() {}

  /**
   * 渲染
   */
  protected render(): void {}
  /**
   * 创建元素
   * @param callback
   */
  protected create(callback: (el: HTMLElement) => void): void {
    let { props } = this.$options;
    callback(document.createElement(props.tag || "div"));
  }

  protected mounted(): void {
    let { props } = this.$options;
    console.log(props, "props");
    this.initGraph({
      container: this.$el,
      ...props
    });
  }

  public insertBefore(component: BaseComponentRender, index?: number) {
    if (this.$options.slot !== true) {
      this.$parent && this.$parent.insertBefore(component, index);
      return;
    }

    index = index || 0;
    if (index > this.$children.length - 1) {
      if (!this.$graph) return;
      if (component instanceof FlowNode) {
        let node: Node;
        // let { props, style, attribute } = component.$options;
        // if (props.type === "vue") {
        //   let { name, option } = props.registerOption;
        //   Graph.registerVueComponent(name, option, true);
        //   style.data = attribute.data;
        //   node = this.$graph.addNode({
        //     ...style
        //   });
        // } else {
        // }
        node = this.$graph.addNode(component.$node!);

        this.$nodes.push(node);
        this.$children.push(component);
      } else {
        throw Error("当前组件并非规则节点");
      }

      // this.$el && this.$el.appendChild(component.$el as HTMLElement);
    } else {
      this.$el && this.$el.insertBefore(component.$el as HTMLElement, this.$children[index].$el!);
      this.$children.splice(index, 0, component);
      console.log("insert new and remove old");
    }
  }
}