import { CompoundedComponent } from "@/types";
import { register } from "@antv/x6-react-shape";
import { Node } from "@antv/x6";
import { ports } from "../data";
import CustomInput from "../CustomInput";

const component = ({ node }: { node: Node }) => {
  const { label, styles } = node.getData();

  return (
    <>
      <div className="relative text-0 w-full h-full">
        <CustomInput value={label} styles={styles} node={node}/>
        <svg
          className="w-full h-full"
          viewBox="0 0 96 54"
          xmlns="http://www.w3.org/2000/svg"
        >
          <rect
            x="2"
            y="2"
            width="92"
            height="50"
            fill="white"
            stroke="#323232"
            strokeWidth="2"
          />
        </svg>
      </div>
    </>
  );
};

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

const Rectangle: CompoundedComponent = {
  name: "矩形",
  icon: require("./image/rectangle.png"),
  node: {
    shape: "custom-react-rectangle",
    data: {
      label: "矩形",
    },
    ports,
  },
};

export default Rectangle;