import { CompoundedComponent } from "@/types";
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,
    strokeColor,
    strokeWidth,
  } = useShapeProps(fill, size, stroke);

  const handleStartMove = () => {
    node.setData({
      ignoreDrag: false,
    });
  };

  const handleEndMove = () => {
    node.setData({
      ignoreDrag: true,
    });
  };

  return (
    <>
      <div
        className="relative text-0 w-full h-full"
        style={{
          opacity: opacity / 100,
          border: `solid ${strokeWidth}px ${strokeColor}`,
        }}
        ref={ref}
      >
        <div
          className="w-40px h-full relative cursor-move"
          style={{
            background: fillContent,
            borderRight: `solid ${strokeWidth}px ${strokeColor}`,
          }}
          onMouseEnter={handleStartMove}
          onMouseLeave={handleEndMove}
        >
        </div>
        <div className="pool">
          <div className="stage"></div>
          <div className="lane"></div>
        </div>
      </div>
    </>
  );
};

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

const horizontalLane: CompoundedComponent = {
  name: "泳道(水平)",
  icon: require("./image/horizontalLane.png"),
  node: {
    shape: "custom-react-horizontalLane",
    data: {
      label: "",
      // 泳池名称
      poolName: "",
      // 泳道
      lane: [],
      // 阶段
      stage: [],
      isLane: true,
      laneDirection: "horizontal",
      ignoreDrag: true,
      noCreate: true,
    },
  },
};

export default horizontalLane;
