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

  const { width, height } = size;
  const circleSize = 4;

  const handleSetName = (val: string) => {
    node.setData({ name: val });
  };

  return (
    <>
      <div
        className="relative text-0 w-full h-full"
        ref={ref}
        style={{ opacity: opacity / 100 }}
      >
        {/* 包名 */}
        <div className="absolute w-full h-25px top-0 left-0 pl-8px">
          <CustomInput value={name} styles={text} node={node} notSetData={true} onChange={handleSetName} />
        </div>

        {/* 文本 */}
        <div className="absolute w-full top-25px left-0" style={{height: height - 25}}>
          <CustomInput value={label} styles={text} node={node} notSetData={true} onChange={handleSetName} />
        </div>
        
        <svg
          className="w-full h-full"
          viewBox={`0 0 ${size?.width} ${size?.height}`}
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>{defsContent}</defs>
          <path
            d={`
              M ${strokeWidth}, 25
              L ${width - strokeWidth - circleSize}, 25
              Q ${width - strokeWidth}, 25 ${width - strokeWidth},${25 + circleSize}
              L ${width - strokeWidth}, ${height - strokeWidth - circleSize}
              Q ${width - strokeWidth}, ${height - strokeWidth} ${width - strokeWidth - circleSize},${height - strokeWidth}
              L ${strokeWidth + circleSize}, ${height - strokeWidth}
              Q ${strokeWidth}, ${height - strokeWidth} ${strokeWidth},${height - strokeWidth - circleSize}
              L ${strokeWidth}, ${25 + circleSize}
              Z
              M ${strokeWidth}, 25
              L ${strokeWidth}, ${circleSize}
              Q ${strokeWidth}, ${strokeWidth} ${circleSize},${strokeWidth}
              L ${width * 0.7 - circleSize }, ${strokeWidth}
              Q ${width * 0.7}, ${1} ${width * 0.7 + circleSize},${circleSize}
              L ${width * 0.76 }, 25
              Z
            `}
            fill={fillContent}
            stroke={strokeColor}
            strokeDasharray={strokeDasharray}
            strokeWidth={strokeWidth}
          />
        </svg>
      </div>
    </>
  );
};

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

const Package = {
  name: "包",
  icon: require("./image/package.png"),
  node: {
    shape: "custom-react-package",
    data: {
      label: "",
      // 包名
      name: "包名称",
      text: {
        textAlign: 'left',
      }
    },
  },
};

export default Package;