import G6 from '@antv/g6';

export const themeColor = '#4fa1a4';

export const strokeColor = '#d9d9d9';

export const selectBg = '#ebf6f7';
export const hoverBg = '#f5f5f5';

/** 数据类型的节点的选中背景色 */
export const dataSelectBg = '#F2F9FF';

/** 选中的边框 */
export const dataSelectStroke = '#276FF5';

// 库名行高
export const itemHeight = 80;

// 字体大小
const fontSize = 24;
// 文字 X 轴偏移量
const fontOffsetX = 12;
//节点文本距离
export const titleTextX =  fontOffsetX * 3 + 32 + 16;
// 文字 Y 轴偏移量
const fontOffsetY = itemHeight / 2 + fontSize / 2;
const imgOffsetY = itemHeight / 2 - 32 / 2 + 10;

/** 节点得图标Y轴偏移量。 */
const nodeImgOffsetY = itemHeight / 2 - 32 / 2;

// 边框线框
const lineWidth = 2;
// 最外层层级大小
export const maxLevel = -1;
// 节点宽度
export const nodeWidth = 500;

/** 数据源节点的内边距 */
export const dsPadding = [itemHeight + 20, 40, 30, 40]; //这个间距造成节点左右有空白。

/** 表的前缀图标 */
const tableUrl = new URL('@/assets/images/table.png', import.meta.url).href;

const tableWhiteUrl = new URL('@/assets/images/table-white.png', import.meta.url).href;

/** 字段的前缀图标 */
const dsFieldUrl = new URL('@/assets/images/ds-field.png', import.meta.url).href;

/** 选中字段的前缀图标 */
const dsFieldUrlSelected = new URL('@/assets/images/ds-field-selected.png', import.meta.url).href;

const dsPng = new URL('@/assets/images/ds.png', import.meta.url).href;
const dsWhitePng = new URL('@/assets/images/ds-white.png', import.meta.url).href;
const data = new URL('@/assets/images/data.png', import.meta.url).href
const edgeDataSelect = new URL('@/assets/images/edge-data-select.png', import.meta.url).href

export const detectLanguage = (text) => {
  if (!text) {
    return 'English';
  }
  let chineseCount = 0;
  let englishCount = 0;

  for (let char of text) {
    if (/[\u4e00-\u9fa5]/.test(char)) {
      chineseCount++;
    } else if (/[a-zA-Z]/.test(char)) {
      englishCount++;
    }
  }

  if (chineseCount > englishCount) {
    return 'Chinese';
  } else if (englishCount > chineseCount) {
    return 'English';
  }
  return 'English';
}

export const handleLabelLength = (label: string) => {
  if (detectLanguage(label) == 'English') {
    return label?.length > 30 ? label.slice(0, 30) + '...' : label;
  }
  return label?.length > 16 ? label.slice(0, 16) + '...' : label;
};

const handleTableNameLength = (label: string) => {
  if (detectLanguage(label) == 'English') {
    return label?.length > 25 ? label.slice(0, 25) + '...' : label;
  }
  return label?.length > 12 ? label.slice(0, 12) + '...' : label;
};

G6.registerNode('dice-er-box', {
  drawShape: function drawShape(cfg: any, group: any) {
    // 节点顶部矩形
    const keyshape = group.addShape('rect', {
      attrs: {
        cursor: 'pointer',
        fill: '#FFF',
        height: itemHeight,
        width: nodeWidth,
        radius: 8,
        // stroke: cfg.isPrimary ? themeColor :  strokeColor,
        // lineWidth: 2,
      },
      draggable: false,
      name: cfg.label,
    });
    if (!cfg.guid) {
      return keyshape;
    }
    // 改变布局切换  切换锚点
    if(cfg.layputDagre){
      // 横向
      cfg.anchorPoints = [
        [0,0],
        [1,0]
      ]
    } else {
     // 纵向
      cfg.anchorPoints = [
        [0.5,0],
        [0.5,1]
      ]
    }
    if(cfg.layputDagre){
      group.addShape('circle', {
        attrs: {
          y: itemHeight/2,
          x: 0,
          r: 10,
          stroke: '#d9d9d9',
          fill: '#fff'
        },
        name: 'cricle-1',
      });
  
      group.addShape('circle', {
        attrs: {
          y: itemHeight/2,
          x: nodeWidth,
          r: 10,
          stroke: '#d9d9d9',
          fill: '#fff'
        },
        name: 'cricle-2',
      });
    }
    let isPrimary = cfg.isPrimary;
    let isFieldLineage = cfg.isFieldLineage;
    group.addShape('rect', {
      attrs: {
        y: nodeImgOffsetY - 8,
        x: fontOffsetX * 2 + 6 - 8,
        width: 50,
        height: 50,
        fill: (isPrimary || !isFieldLineage) ? '#E0EFFF' : '#F2F2F2',
        radius: 5
      },
      name: 'img-bg-rect',
    });

    group.addShape('image', {
      attrs: {
        y: nodeImgOffsetY,
        x: fontOffsetX * 2 + 6,
        width: 32,
        height: 32,
        img: isFieldLineage ? (isPrimary ? dsFieldUrlSelected : dsFieldUrl) : new URL('@/assets/images/table.png', import.meta.url).href
      },
      name: 'img-field',
    });

    // 节点顶部文本
    group.addShape('text', {
      attrs: {
        y: fontOffsetY,
        x: titleTextX,
        fill: cfg.isPrimary ? '#276FF5' :  '#666666',
        text: handleLabelLength(cfg.label),
        fontSize: fontSize,
        fontWeight: 500,
      //  fontFamily: 'simsun'
      },
      name: cfg.label,
    });

    return keyshape;
  },

  /**
   * 更改状态，主要用于高亮
   * @param name 状态名称
   * @param value true | false
   * @param item 要改变的节点
   */
  setState(name, value, item: any) {
    if (name && name.startsWith('hover')) {
      const shape = item.get('keyShape');
      const anchor = name.split('-')[1];
      if (anchor === 'dice') {
        let isPrimary = item.getModel().isPrimary;
        if (!shape.get('parent')) {
          return;
        }
        let label = shape.get('parent').get('children')[0];
        if (label.attrs.fill == selectBg) {
          return;
        }
        label?.attr('fill', value ? hoverBg : '#fff');
      } else {
        const anchorIndex = item.getModel().attrs.findIndex((e: any) => e.key === anchor);
        if (anchorIndex !== -1) {
          let children = shape.get('parent').get('children')[5].get('children'); 
          const rectLabel = children[anchorIndex * 2];
          if (rectLabel.attrs.fill == selectBg) {
            return;
          }
          rectLabel.attr('fill', value ? hoverBg : '#fff');
        }
      }
      return;
    }

   // 表名称高亮
   let cfg = item.getModel();
    if (name && name.startsWith('tableHighlight')) {
      const shape = item.get('keyShape');
      //shape.attr('stroke', value ? themeColor : (isPrimary ? themeColor : strokeColor));
      if (name == 'tableHighlight-clickNode') {
        shape.get('parent').get('children')[0]?.attr('fill', value ? dataSelectBg : '#fff');
      }
   //   shape.get('parent').get('children')[0]?.attr('fill', value ? dataSelectBg : '#fff');
      /** 圆圈 */
      if (cfg.layputDagre) {
        const circle1 = shape.get('parent')?.find((ele) => ele.get('name') === 'cricle-1');
        circle1?.attr('stroke', value ? dataSelectStroke : strokeColor);
        const circle2 = shape.get('parent')?.find((ele) => ele.get('name') === 'cricle-2');
        circle2?.attr('stroke', value ? dataSelectStroke : strokeColor);
      }
      
      let isFieldLineage = cfg.isFieldLineage;
      if (isFieldLineage) {
        let isPrimary = cfg.isPrimary;
        const rectBg = shape.get('parent')?.find((ele) => ele.get('name') === 'img-bg-rect');
        rectBg?.attr('fill', (value || isPrimary) ? '#E0EFFF' : '#F2F2F2');
        const rectImg1 = shape.get('parent')?.find((ele) => ele.get('name') === 'img-field');
        rectImg1?.attr('img', (value || isPrimary) ? dsFieldUrlSelected : dsFieldUrl);
      }
    }

  },

  // getAnchorPoints() {
  //   return [
  //     [0, 0],
  //     [1,0],
  //   ];
  // },
});

G6.registerEdge('dice-er-edge', {
  /** 保留这个方法是为了处理箭头的起始和结束位置，指向小圆圈。若有别的方式处理，也可去掉。 */
  draw: function draw(cfg: any, group: any) {
    const edge = group.cfg.item;
    edge._cfg.model.style.endArrow = {
      path: G6.Arrow.triangle(),
    }
    const style = cfg.style;
    const sourceNode = edge.getSource().getModel();
    const targetNode = edge.getTarget().getModel();
    //需要考虑combo收起的情况
    const sourceIndex = sourceNode.attrs?.findIndex(
      (e: any) => e.key === cfg.sourceAnchor
    ) || -1;

    const sourceStartIndex = sourceNode.startIndex || 0;

    const targetIndex = targetNode.attrs?.findIndex(
      (e: any) => e.key === cfg.targetAnchor
    ) || -1;

    const targetStartIndex = targetNode.startIndex || 0;

    let sourceX 
    let sourceY 
    if(cfg.layputDagre) {
      sourceX = nodeWidth / 2 + lineWidth / 2;
      sourceY = itemHeight / 2 + lineWidth / 2;
    } else {
      sourceX = nodeWidth / 2 + lineWidth / 2;
      sourceY = itemHeight  + lineWidth / 2;
      // sourceX = nodeWidth / 2 + lineWidth / 2;
      // sourceY = itemHeight / 2 + lineWidth / 2;
    }

    if (sourceIndex > sourceStartIndex - 1) {
      sourceY =
        itemHeight + (sourceIndex - sourceStartIndex + 0.5) * itemHeight;
      sourceX =
      itemHeight + (sourceIndex - sourceStartIndex + 0.5) * nodeWidth;
    }
    let targetY,targetX

    if(cfg.layputDagre){
       targetY = itemHeight / 2 + lineWidth / 2;
       targetX = nodeWidth / 2 + lineWidth / 2;
    } else {
      targetY = -itemHeight  + lineWidth / 2;
      targetX = nodeWidth / 2 + lineWidth / 2;
    }
    
    if (targetIndex > targetStartIndex - 1) {
      targetY =
        (targetIndex - targetStartIndex + 0.5) * itemHeight + itemHeight;
    }
    const startPoint = {
      ...cfg.startPoint,
    };
    const endPoint = {
      ...cfg.endPoint,
    };
    if(cfg.layputDagre) {
      startPoint.y = startPoint.y + sourceY;
      endPoint.y = endPoint.y + targetY;
    } else {
      if(edge.getModel().startPoint.anchorIndex===1){
        startPoint.x = startPoint.x;
        endPoint.x = endPoint.x +5;
        startPoint.y = startPoint.y + sourceY/2 -10;
        endPoint.y = endPoint.y + targetY-10;
      } else {
        startPoint.x = startPoint.x ;
        endPoint.x = endPoint.x+5 ;
        startPoint.y = startPoint.y + sourceY/2 -10;
        endPoint.y = endPoint.y + targetY-10;
      }
      // startPoint.y = startPoint.y + sourceY;
      // endPoint.y = endPoint.y + targetY;
      
    }
   
    
    let shape; // 就是那条线

    if (sourceNode.id !== targetNode.id) {
      if (cfg.sourceInfo.level > cfg.targetInfo.level) {//反方向的线。
        shape = group.addShape('path', {
          attrs: {
            stroke: style.stroke,
            lineWidth: style.lineWidth,
            lineAppendWidth:40,
            path: [
              ['M', startPoint.x - 10, startPoint.y + 5],
              [
                'C',
                endPoint.x / 3 + (2 / 3) * startPoint.x + 10,
                startPoint.y,
                endPoint.x / 3 + (2 / 3) * startPoint.x + 10,
                endPoint.y,
                endPoint.x + 10,
                endPoint.y - 5,
              ],
            ],
            endArrow: G6.Arrow.vee(),
          },
          name: 'path-shape',
        });
      } else {
        if (cfg.sourceInfo.level == cfg.targetInfo.level) {//在同一个数据库内部连线。
          shape = group.addShape('path', {
            attrs: {
              stroke: style.stroke,
              lineWidth: style.lineWidth,
              lineAppendWidth:40,
              path: [
                ['M', startPoint.x - 10, startPoint.y - 5],
                [
                  'C',
                  endPoint.x / 3 + (2 / 3) * startPoint.x - 10,
                  startPoint.y,
                  endPoint.x / 3 + (2 / 3) * startPoint.x - 200,
                  endPoint.y,
                  endPoint.x - 10,
                  endPoint.y + 5,
                ],
              ],
              endArrow: G6.Arrow.vee(),
            },
            name: 'path-shape',
          });
        } else {
          if(cfg.layputDagre) {
            shape = group.addShape('path', {
              attrs: {
                stroke: style.stroke,
                lineWidth: style.lineWidth,
                lineAppendWidth:40,
                path: [
                  ['M', startPoint.x + 10, startPoint.y],
                  [
                    'C',
                    endPoint.x / 3 + (2 / 3) * startPoint.x - 10,
                    startPoint.y,
                    endPoint.x / 3 + (2 / 3) * startPoint.x - 10,
                    endPoint.y,
                    endPoint.x - 10,
                    endPoint.y,
                  ],
                ],
                endArrow: G6.Arrow.vee(),
              },
              name: 'path-shape',
            });
          } else {
            shape = group.addShape('path', {
              attrs: {
                stroke: style.stroke,
                lineWidth: style.lineWidth,
                lineAppendWidth: 40,
                path: [
                  ['M', startPoint.x, startPoint.y],
                  [
                    'C',
                    startPoint.x,
                    startPoint.y / 3 + (2 / 3) * endPoint.y,
                    endPoint.x,
                    startPoint.y / 3 + (2 / 3) * endPoint.y,
                    endPoint.x - 5 ,
                    endPoint.y - 20,
                  ],
                ],
                endArrow: G6.Arrow.vee(),
              },
              name: 'path-shape',
            });
          }
        
        }
      }
    }

    return shape;
  },

  afterDraw(cfg:any, group:any) {
    if (!cfg.prop || !cfg.prop.some(p => p.isCustom != 1)) {
      return;
    }
    // get the first shape in the graphics group of this edge, it is the path of the edge here
    // 获取图形组中的第一个图形，在这里就是边的路径图形
    const shape = group.get('children')[0];
    // get the coordinate of the mid point on the path
    // 获取路径图形的中点坐标
    // get the coordinate of the quatile on the path
    // 获取路径上的四分位点坐标
    if(cfg.layputDagre){  // 横向排列
      const quatile = shape.getPoint(0.6);
      const quatileColor = cfg.quatileColor || '#333';
      // add a circle on the quatile of the path
      // 在四分位点上放置一个圆形
        group.addShape('circle', {
          attrs: {
            lineWidth:2,
            r: 30,
            fill:'#FFFFFF',
            x: quatile.x,
            y: quatile.y,
            stroke: '#d9d9d9',
          },
          name: 'circle-shape',
          //stroke:"",
        });
        const midPoint = shape.getPoint(0.6);
        group.addShape('image', {
          attrs: {
            width: 36,
            height: 32,
            img:data ,
            
            x: midPoint.x - 18,
            y: midPoint.y - 16,
          },
          name: 'circle-img'
        });
    } else {
      // 纵向排列
      const quatile = shape.getPoint(0.6);
      const quatileColor = cfg.quatileColor || '#333';
      // add a circle on the quatile of the path
      // 在四分位点上放置一个圆形
        group.addShape('circle', {
          attrs: {
            lineWidth:2,
            r: 30,
            fill:'#FFFFFF',
            x: quatile.x,
            y: quatile.y,
            stroke: '#d9d9d9',
          },
          name: 'circle-shape',
          //stroke:"",
        });
        const midPoint = shape.getPoint(0.6);
        group.addShape('image', {
          attrs: {
            width: 36,
            height: 32,
            img:data ,
            
            x: midPoint.x - 18,
            y: midPoint.y - 16,
          },
        });
    }

   // cfg.isMount = false //只创建一次
  },
  update:undefined,
    /**
 * 设置状态，主要用于高亮
 * @param name 状态
 * @param value true | false
 * @param item 要改变状态的边
 */
 setState(name, value, item: any) {
  const shape = item.get('keyShape');
  // 字段连线高亮或表连线高亮
  if (name && name.startsWith('tableHighlight')) {
    const circle = item._cfg.group.cfg.children[1];
    circle?.attr('stroke', value ? dataSelectStroke : strokeColor);
    circle?.attr('lineWidth', value ? 3 : 2);
    shape.attr('stroke', value ? dataSelectStroke : strokeColor);
    shape.attr('lineWidth', value ? 3 : 2);
    const circleImg = item._cfg.group.cfg.children[2];
    circleImg?.attr('img', value ? edgeDataSelect : data);
  }
 }
}, 'cubic');

G6.registerCombo('dice-er-combo', {
  drawShape: function drawShape(cfg: any, group: any) {
   
    const self = this;
    const style = self.getShapeStyle(cfg);
    let isFieldLineage = cfg.isFieldLineage;
    let isSub = cfg.isSub;
   // 通过添加上边距的方法实现，上面显示表名称。
    cfg.padding = [itemHeight + (isFieldLineage && !isSub ? 60 : 0) + 20, 10, 20, 10];
    let x = -style.width / 2 - (dsPadding[3]) / 2;
    let y = -style.height / 2 - (dsPadding[0] - dsPadding[2]) / 2;
    const rect = group.addShape('rect', {
      attrs: {
        ...style,
        x: x,
        y: y,
        width: style.width,
        height: style.height + (isFieldLineage && !isSub ? 40 : 0),
        fill: cfg.isPrimary ? '#276FF5' : '#E0EFFF',
      },
      draggable: true,
      name: 'combo-keyShape',
    });
    // 节点顶部矩形
    let rectX = -style.width / 2 + (dsPadding[3]) / 2;
    let rectY = -style.height / 2 - (dsPadding[0] + dsPadding[2]) / 2;
    !cfg.isSub && group.addShape('rect', {
      attrs: {
        x: rectX,
        y:  rectY,
        cursor: 'pointer',
        fill: cfg.isPrimary ? '#276FF5' : '#E0EFFF',
        height: 80,
        width: style.width - 40,
        radius: 10,
        lineWidth: 0,
      },
      draggable: true,
      name: cfg.label,
    });
 if(!cfg.layputDagre) {
  group.addShape('circle', {
    attrs: {
      y:-140,
      x: 0,
      r: 10,
      stroke: '#d9d9d9',
      fill: '#fff'
    },
    name: 'cricle-1',
  });

  group.addShape('circle', {
    attrs: {
      y:itemHeight-20,
      x: 0,
      r: 10,
      stroke: '#d9d9d9',
      fill: '#fff'
    },
    name: 'cricle-1',
  });
 } 
    group.addShape('image', {
      attrs: {
        y: rectY + imgOffsetY - 23,
        x: rectX + fontOffsetX * 2,
        width: 32,
        height: 32,
        img: isSub ? (cfg.isPrimary ? tableWhiteUrl : tableUrl) : (cfg.isPrimary ? dsWhitePng : dsPng)
      },
      draggable: true,
      name: `${cfg.label}-ds`,
    });
         /** 返回节点底部矩形 */
         let height = (cfg.children?.length || 0) * itemHeight + 40;
         group.addShape('rect', {
           attrs: {
             x: x + 20 + 20,
             y: height / 2 - height + 10,
             cursor: 'pointer',
             fill: '#FFF',
             height: height - 20, /** 矩形下边距 */
             width:  style.width - 40, /** 左右边距 */
             radius: 0,
             lineWidth: 0
           },
           name: 'combo-content',
         });

if (isFieldLineage && !isSub) {

  group.addShape('image', {
    attrs: {
      y: rectY + 15,
      x: x + 20 + 20 + fontOffsetX * 2 + 6,
      width: 32,
      height: 32,
      img: cfg.isPrimary ? tableWhiteUrl : tableUrl
    },
    name: `ds-text-img`,
  });

  // 节点库下方的表的字体样式和大小。
  group.addShape('text', {
    attrs: {
      y: rectY + itemHeight / 2 - fontSize / 2 + 16,
      x: x + 20 + 20 + titleTextX - 8,
      fill: cfg.isPrimary ? '#fff' : '#216ED1',
      text: handleTableNameLength(cfg.tableChName),
      fontSize: 30,
      // fontWeight: 500,
      fontFamily: 'simsun'
    },
    name: 'ds-text',
  });
 }
    return rect;
  },
  afterUpdate: function afterUpdate(cfg: any, combo: any) {
    const group = combo.get('group');
    // 在该 Combo 的图形分组根据 name 找到右侧圆图形
    const self = this;
    const style = self.getShapeStyle(cfg);
    let x = -style.width / 2;
  
    let rectY = -style.height / 2 - 20 - (cfg.isFieldLineage && !cfg.isSub ? 60 / 2 : 0);

    // if (style.width <= 100) {
    //   const combo =group.find((ele) => ele.get('name') === 'combo-keyShape');
    //   combo?.attr({
    //     width: 560
    //   });
    // }

    const topRect = group.find((ele) => ele.get('name') === cfg.label);
    if(topRect && !cfg.isSub) {
      topRect?.attr({
        x: x,
        y: rectY,
        width: style.width
      });
    }

    const dsImg = group.find((ele) => ele.get('name') === `${cfg.label}-ds`);
    if (dsImg) {
      dsImg.attr({
        y: rectY + imgOffsetY - 23,
        x: x + fontOffsetX * 2 + 16
      });
    }
    const tableImg = group.find((ele) => ele.get('name') === `ds-text-img`);
    if (tableImg) {
      tableImg.attr({
        y: rectY + 70,
        x: x + fontOffsetX * 2 + 16
      });
    }

    const tableText = group.find((ele) => ele.get('name') === `ds-text`);
    if (tableText) {
      tableText.attr({
        y: rectY + 70 + fontSize + 8,
        x: x + titleTextX,
        text: handleTableNameLength(cfg.tableChName),
      });
    }
  },
  
  // getAnchorPoints() {
  //   return [
  //     [0, 0],
  //     [1, 0],
  //   ];
  // },

    /**
   * 更改状态，主要用于高亮
   * @param name 状态名称
   * @param value true | false
   * @param item 要改变的节点
   */
    setState(name, value, item: any) {
      
    },
}, 'rect');