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

  // 计算正五边形的顶点坐标
  const getPoints = (width: number, height: number, strokeWidth: number) => {
    let points = [
      [width / 2, strokeWidth],
      [width - strokeWidth, height * 0.4],
      [width * 0.8, height - strokeWidth],
      [width * 0.2, height - strokeWidth],
      [strokeWidth, height * 0.4],
    ];

    return points.map((point) => `${point[0]},${point[1]}`).join(" ");
  };

  return (
    <>
      <div
        className="relative text-0 w-full h-full"
        ref={ref}
        style={{ opacity: opacity / 100 }}
      >
        <CustomInput value={label} styles={text} node={node} />
        <svg
          className="w-full h-full"
          viewBox={`0 0 ${size?.width} ${size?.height}`}
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>{defsContent}</defs>
          <polygon
            points={getPoints(size?.width, size?.height, strokeWidth)}
            fill={fillContent}
            stroke={strokeColor}
            strokeDasharray={strokeDasharray}
            strokeWidth={strokeWidth}
          />
        </svg>
      </div>
    </>
  );
};

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

// 左侧连接桩
Graph.registerPortLayout("fivePolygonLeft", (portsPositionArgs, elemBBox) => {
  return portsPositionArgs.map((item) => {
    return {
      ...item,
      position: {
        x: 0,
        y: elemBBox.height * 0.4,
      },
    };
  });
});

// 右侧连接桩
Graph.registerPortLayout("fivePolygonRight", (portsPositionArgs, elemBBox) => {
  return portsPositionArgs.map((item) => {
    return {
      ...item,
      position: {
        x: elemBBox.width,
        y: elemBBox.height * 0.4,
      },
    };
  });
});

const FivePolygon = {
  name: "五边形",
  icon: require("./image/polygon.png"),
  node: {
    shape: "custom-react-fivePolygon",
    data: {
      label: "",
    },
    ports: {
      ...ports,
      groups: {
        ...ports.groups,
        fivePolygonLeft: {
          position: "fivePolygonLeft",
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: "#5F95FF",
              strokeWidth: 1,
              fill: "#fff",
              style: {
                visibility: "hidden",
              },
            },
          },
        },
        fivePolygonRight: {
          position: "fivePolygonRight",
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: "#5F95FF",
              strokeWidth: 1,
              fill: "#fff",
              style: {
                visibility: "hidden",
              },
            },
          },
        },
      },
      items: [
        {
          group: "top",
          args: {
            dy: 2,
          },
        },
        {
          group: "fivePolygonLeft",
        },
        {
          group: "bottom",
          args: {
            dy: -2,
          },
        },
        {
          group: "fivePolygonRight",
        },
      ],
    },
  },
};

export default FivePolygon;
