import { Node } from "@antv/x6";
import { Button, InputNumber, Divider, ConfigProvider } from "antd";

export default function setting({
  node,
  onChangeLane,
}: {
  node: Node;
  onChangeLane: (value: number | null) => void;
}) {
  const { lane, direction, textDirection } = node.getData<{
    lane: any[];
    direction: string;
    textDirection: string;
  }>();

  const handleSetDirtion = (val: "vertical" | "horizontal") => {
    if(val === direction) return;
    node.setData({ direction: val });
    const { width, height } = node.getSize();
    node.setSize({
      width: height,
      height: width
    })
  }

  return (
    <ConfigProvider prefixCls="shalu">
      <div
        className="w-140px shadow-lg absolute top--45px bg-white p-4px"
        key={lane.length}
      >
        <InputNumber
          min={0}
          max={20}
          size="small"
          className="w-50px"
          variant="filled"
          value={lane.length}
          onChange={onChangeLane}
        />
        <Divider type="vertical" />
        <Button
          size="small"
          className={`rotate--90 mr-8px ${direction === "horizontal" ? "active" : ""}`}
          icon={<i className="iconfont icon-yongdao rotate-90" />}
          onClick={() => handleSetDirtion("horizontal")}
        />
        <Button
          size="small"
          className={`${direction === "vertical" ? "active" : ""}`}
          icon={<i className="iconfont icon-yongdao" />}
          onClick={() => handleSetDirtion("vertical")}
        />
        {/* <Divider type="vertical" /> */}
        {/* <Button
          size="small"
          className={`${textDirection === "horizontal" ? "active" : ""}`}
          icon={<i className="iconfont icon-A" />}
          onClick={() => {
            node.setData({ textDirection: "horizontal" });
          }}
        />
        <Button
          size="small"
          className={`rotate--90 ml-8px ${textDirection === "vertical" ? "active" : ""}`}
          icon={<i className="iconfont icon-A" />}
          onClick={() => {
            node.setData({ textDirection: "vertical" });
          }}
        /> */}
      </div>
    </ConfigProvider>
  );
}
