
import { register } from "@antv/x6-react-shape";
import { Node } from "@antv/x6";
import { useSizeHook, useShapeProps } from "../../../hooks";
const component = ({ node }: { node: Node }) => {
  const { fill, stroke, opacity } = node.getData();
  const { size, ref } = useSizeHook();
  const {
    fillContent,
    defsContent,
    strokeColor,
    strokeWidth,
    strokeDasharray,
  } = useShapeProps(fill, size, stroke);

  const { width, height } = size || { width: 0, height: 0 };

  return (
    <>
      <div
        className="relative text-0 w-full h-full"
        ref={ref}
        style={{ opacity: opacity / 100 }}
      >
        <svg
          className="w-full h-full"
          viewBox={`0 0 ${width} ${height}`}
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>{defsContent}</defs>
          <rect
            x={strokeWidth}
            y={strokeWidth}
            rx={8}
            ry={8}
            width={size?.width - strokeWidth * 2}
            height={size?.height - strokeWidth * 2}
            fill={fillContent}
            stroke={strokeColor}
            strokeDasharray={strokeDasharray}
            strokeWidth={strokeWidth}
          />
        </svg>
      </div>
    </>
  );
};

register({
  shape: "custom-react-sequenceActivation",
  width: 30,
  height: 100,
  effect: ["data"],
  component: component,
});

const sequenceActivation = {
  name: "激活",
  icon: require("./image/sequenceActivation.png"),
  node: {
    shape: "custom-react-sequenceActivation",
    data: {
      label: "",
    },
    ports: {
      groups: {
        right: {
          position: 'right',
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: '#5F95FF',
              strokeWidth: 1,
              fill: '#fff',
              style: {
                visibility: 'hidden',
              },
            },
          },
        },
        left: {
          position: 'left',
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: '#5F95FF',
              strokeWidth: 1,
              fill: '#fff',
              style: {
                visibility: 'hidden',
              },
            },
          },
        },
      },
      items: [
        {
          group: 'right',
          args: {
            dx: -2,
          },
        },
        {
          group: 'left',
          args: {
            dx: 2,
          },
        },
      ],
    },
  },
};

export default sequenceActivation;
