import React, { memo } from 'react';
import '@antv/x6-react-shape';
import { Graph } from '@antv/x6';
import { IconFont } from '@zgfe/business-lib';
var portConfig = {
  circle: {
    r: 6,
    magnet: true,
    stroke: '#165DFF',
    fill: '#fff',
    strokeWidth: 2,
    visibility: 'hidden'
  }
};
export var MyComponent = /*#__PURE__*/memo(function (_ref) {
  var node = _ref.node;
  var data = node === null || node === void 0 ? void 0 : node.getData();
  return /*#__PURE__*/React.createElement("div", {
    className: "visual-flow-node"
  }, /*#__PURE__*/React.createElement(IconFont, {
    type: data.icon
  }), /*#__PURE__*/React.createElement("span", {
    className: "label"
  }, data.label), /*#__PURE__*/React.createElement("span", {
    className: "icon-handle"
  }, data.status === 'failed' && /*#__PURE__*/React.createElement(IconFont, {
    type: "tishiicon",
    className: "failed"
  }), data.status === 'success' && /*#__PURE__*/React.createElement(IconFont, {
    type: "check_filled",
    className: "success"
  })));
}, function (prev, next) {
  // return _.isEqual(next.node?.previous('data'), next.node?.getData());
  // TODO 需要优化渲染逻辑，避免无效渲染
  return false;
});
export var commonNodeConfig = {
  inherit: 'react-shape',
  width: 160,
  height: 32,
  ports: {
    groups: {
      right: {
        attrs: portConfig,
        position: 'right'
      },
      left: {
        attrs: portConfig,
        position: 'left'
      },
      leftTop: {
        attrs: portConfig,
        position: {
          name: 'absolute',
          args: {
            x: 0,
            y: 7
          }
        }
      },
      leftBottom: {
        attrs: portConfig,
        position: {
          name: 'absolute',
          args: {
            x: 0,
            y: 24
          }
        }
      },
      rightTop: {
        attrs: portConfig,
        position: {
          name: 'absolute',
          args: {
            x: '100%',
            y: 7
          }
        }
      },
      rightBottom: {
        attrs: portConfig,
        position: {
          name: 'absolute',
          args: {
            x: '100%',
            y: 24
          }
        }
      }
    },
    items: [{
      group: 'right'
    }, {
      group: 'left'
    }]
  },
  component: /*#__PURE__*/React.createElement(MyComponent, null)
};
Graph.registerNode('process', commonNodeConfig, true);