import { RectNode, RectNodeModel, h } from "@logicflow/core";
import { getBytesLength } from "../util";
const makeX = (arr) => {
  const len = arr.length;
  let i = len % 2 == 0 ? (len / 2) * -1 : ((len - 1) / 2) * -1;
  let res = [];
  for (let j = i; j <= i * -1; j++) {
    if(len%2==0 && j==0){

    }else{
      res.push(30 * j);
    }
  }
  return res;
};
class RedNodeModel extends RectNodeModel {
  /**
   * 初始化
   */
  initNodeData(data) {
    super.initNodeData(data);
    this.width = 200;
    this.height = 60;
    this.radius = 5;
    this.text.x = this.x + 10;
    this.defaultFill = data.fill || "rgb(253, 208, 162)";

    const startOnlyAsTarget = {
      message: "开始结点只能连接结束节点",
      validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
        return sourceAnchor.type !== targetAnchor.type;
      },
    };
    this.sourceRules.push(startOnlyAsTarget);
  }
  getData() {
    const data = super.getData();
    data.properties.ui = "node-ai";
    return data;
  }

  updateText(val) {
    super.updateText(val);
    this.setAttributes();
  }
  /**
   * 重写节点样式
   */
  getNodeStyle() {
    const style = super.getNodeStyle();
    const dataStyle = this.properties.style || {};
    if (this.isSelected) {
      style.strokeWidth = Number(dataStyle.borderWidth) || 2;
      style.stroke = dataStyle.borderColor || "#ff7f0e";
    } else {
      style.strokeWidth = Number(dataStyle.borderWidth) || 1;
      style.stroke = dataStyle.borderColor || "#999";
    }
    style.fill = dataStyle.backgroundColor || this.defaultFill;
    return style;
  }
  /**
   * 重写定义锚点
   */
  getDefaultAnchor() {
    const { x, y, id, width, height } = this;

    const node = this.properties?.data?.parameters;
    let inputs = makeX(node?.inputs || []).map((d, idx) => {
      return {
        x: x + d,
        y: y - height / 2,
        id: `${idx + 1}_right`,
        type: "start",
        idx: idx + 1,
        className: "anchors-start",
      };
    });
    let outputs = makeX(node?.outputs || []).map((d, idx) => {
      return {
        x: x + d,
        y: y + height / 2,
        id: `${idx + 1}_left`,
        idx: idx + 1,
        type: "end",
        className: "anchors-end",
      };
    });

    const anchors = [...inputs, ...outputs];
    return anchors;
  }
  /**
   *
   */
  getOutlineStyle() {
    const style = super.getOutlineStyle();
    style.stroke = "transparent";
    style.hover.stroke = "transparent";
    return style;
  }
  handleContextMenu(ev) {
  }
}
class RedNode extends RectNode {
  /**
   * 1.1.7版本后支持在view中重写锚点形状。
   * 重写锚点新增
   */
  getAnchorShape(anchorData) {
    const { x, y, type, className, idx } = anchorData;
    if (type == "start") {
      return h(
        "svg",
        {
          width: 20,
          height: 20,
          x: x - 10,
          y: y - 0,
        },
        h("circle", {
          r: 10,
          cx: 10,
          cy: 10,
          fill: "#0bdd0b",
        }),
        h(
          "text",
          {
            x: 10,
            y: 16,
            style: "text-anchor:middle;fill:#000;font-size:16px;",
          },
          "i" + idx
        )
      );
    }
    return h(
      "svg",
      {
        width: 20,
        height: 20,
        x: x - 10,
        y: y - 20,
      },
      h("circle", {
        r: 10,
        cx: 10,
        cy: 10,
        fill: "#ffb01f",
      }),
      h(
        "text",
        {
          x: 10,
          y: 16,
          style: "text-anchor:middle;fill:#000;font-size:16px;",
        },
        "o" + idx
      )
    );
  }

  getShape() {
    const { text, x, y, width, height, radius } = this.props.model;
    const style = this.props.model.getNodeStyle();
    const fillColor=this.props.model.properties.fill||"#FFA726";
    let subText=(this.props.model.properties?.data?.oper_sub_type_name||"");
    let subType = (this.props.model.properties?.data?.oper_sub_type_name||"").split("").filter(t=>t.length>0).map((t,idx)=>{
      return h("text",{
          x:x-width/2+8,
          y:y+idx*13-(subText.length==3?8:14),
          style: "text-anchor:left;fill:#FFCDD2;font-size:12px;",
      },t)
    }); 
    
    const node = this.props.model.properties?.data?.parameters;    
    let inputs = makeX(node?.inputs || []).map((d, idx) =>
      h(
        "svg",
        {
          width: 20,
          height: 20,
          x: x + d - 10,
          y: y - height / 2 - 0,
        },
        h("circle", {
          r: 10,
          cx: 10,
          cy: 10,
          fill: "#0bdd0b",
        }),
        h(
          "text",
          {
            x: 10,
            y: 16,
            style: "text-anchor:middle;fill:#000;font-size:16px;",
          },
          "i" + (idx + 1)
        )
      )
    );
    let outputs = makeX(node?.outputs || []).map((d, idx) =>
      h(
        "svg",
        {
          width: 20,
          height: 20,
          x: x + d - 10,
          y: y + height / 2 - 20,
        },
        h("circle", {
          r: 10,
          cx: 10,
          cy: 10,
          fill: "#ffb01f",
        }),
        h(
          "text",
          {
            x: 10,
            y: 16,
            style: "text-anchor:middle;fill:#000;font-size:16px;",
          },
          "o" + (idx + 1)
        )
      )
    );

    return h(
      "g",
      {
        className: "lf-ai-node",
      },
      [
        h("rect", {
          ...style,
          x: x - width / 2,
          y: y - height / 2,
          width,
          height,
          fill:fillColor,
          rx: radius,
          ry: radius,
        }),
        h("rect",{
          fill: "#C62828",
          x: x - width / 2,
          y: y - height / 2,
          width:30,
          height,
          rx: radius,
          ry: radius,
        }),
        h("rect",{
          fill: "#C62828",
          x: x - width / 2+20,
          y: y - height / 2,
          width:10,
          height,
        }),
        ...subType,
        ...inputs,
        ...outputs,
      ]
    );
  }
}

export default {
  type: "ai-node",
  model: RedNodeModel,
  view: RedNode,
};
