import { RectNode, RectNodeModel, h } from "@logicflow/core"
import { getBytesLength } from '../util'


class RedNodeModel extends RectNodeModel {
  /**
   * 初始化
   */
  initNodeData(data) {
    super.initNodeData(data)
    this.width = 200;
    this.height = 30;
    this.radius = 5;
    this.text.x = this.x + 10;    
    this.defaultFill = data.fill||'rgb(253, 208, 162)'
  }
  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 anchors = [
      {
        x: x ,
        y: y+ height / 2,
        id: `${id}_right`,
        type: "right"
      },
      {
        x: x ,
        y: y- height / 2,
        id: `${id}_left`,
        type: "left"
      }
    ];
    return anchors;
  }
  /**
   * 
   */
  getOutlineStyle() {
    const style = super.getOutlineStyle();
    style.stroke = 'transparent';
    style.hover.stroke = 'transparent';
    return style;
  }
  handleContextMenu(ev){
    debugger
  }
}
class RedNode extends RectNode {
 
  /**
   * 1.1.7版本后支持在view中重写锚点形状。
   * 重写锚点新增
   */
  getAnchorShape(anchorData) {
    const { x, y, type } = anchorData;
    return h("rect", {
      x: x - 5,
      y: y - 5,
      width: 10,
      height: 10,
      className: 'custom-anchor'
    });
  } 
  getShape() {
    const {
      text,
      x,
      y,
      width,
      height,
      radius
    } = this.props.model;
    const style = this.props.model.getNodeStyle()
    return h(
      'g',
      {
        className: 'lf-ai-node'
      },
      [
        h('rect', {
          ...style,
          x: x - width / 2,
          y: y - height / 2,
          width,
          height,
          rx: radius,
          ry: radius
        })        
      ]
    )
  }
}


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