import { CompoundedComponent } from "@/types";
import { register } from "@antv/x6-react-shape";
import { Graph, Node } from "@antv/x6";
import { useSizeHook, useShapeProps } from "@/hooks";
import { useState } from "react";
import Setting from "./Setting";
import Pool from "./Pool";
import { useLane } from "./hooks/useLane";

const component = ({ node, graph }: { node: Node; graph: Graph }) => {
  const {
    fill,
    stroke,
    opacity,
  } = node.getData();
  const [showSetting, setShowSetting] = useState(false);
  const { size, ref } = useSizeHook();
  const { fillContent, strokeColor, strokeWidth } = useShapeProps(
    fill,
    size,
    stroke
  );

  graph.on("node:selected", (args) => {
    setShowSetting(
      graph.getSelectedCells().length === 1 && node.id === args.node.id
    );
  });
  graph.on("node:unselected", (args) => {
    if (node.id === args.node.id) setShowSetting(false);
  });

  const { handleChangeLane } = useLane(node, graph);

  return (
    <>
      {showSetting && <Setting node={node} onChangeLane={handleChangeLane} />}
      <div
        className="relative text-0 w-full h-full"
        style={{
          opacity: opacity / 100,
          border: `solid ${strokeWidth}px ${strokeColor}`,
        }}
        ref={ref}
      >
        <Pool
          node={node}
          fillContent={fillContent}
          strokeWidth={strokeWidth}
          strokeColor={strokeColor}
        />
      </div>
    </>
  );
};

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

const horizontalPool: CompoundedComponent = {
  name: "泳池(水平)",
  icon: require("./image/horizontalPool.png"),
  node: {
    shape: "custom-react-horizontalPool",
    data: {
      label: "",
      // 泳池名称
      poolName: "",
      // 泳道
      lane: [],
      // 阶段
      stage: [],
      // 泳道名称高度
      headerHeight: 40,
      // 阶段宽度
      stageWidth: 20,
      // 泳道名称高度
      laneHeadHeight: 40,
      // 泳池方向
      direction: "horizontal",
      // 文字方向
      textDirection: "vertical",
      // 忽略拖拽
      ignoreDrag: true,
    },
  },
};

export default horizontalPool;
