import { FC } from "react";
import { Button, TreeDataNode } from "antd";
import { DataNode } from "antd/es/tree";
import { useNavigate } from "react-router-dom";
import { DageTreeActions } from "@dage/pc-components";
import { PlusOutlined } from "@ant-design/icons";
import style from "../../index.module.scss";

export interface SidebarProps {
  /**
   * 勾选模式
   */
  checkable?: boolean;
}

const treeData: TreeDataNode[] = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "leaf",
        key: "0-0-0",
      },
      {
        title: "leaf",
        key: "0-0-1",
        children: [
          {
            title: "leaf leaf",
            key: "0-1-1",
          },
        ],
      },
    ],
  },
];

let key = 0;

export const Sidebar: FC<SidebarProps> = ({ checkable }) => {
  const navigate = useNavigate();

  const handleAddNode = async (item: DataNode) => {
    return new Promise((res) => {
      setTimeout(() => {
        if (!item.children) {
          item.children = [
            {
              title: "leaf",
              key: "0-0-0" + key++,
            },
          ];
        }
        res(true);
      }, 1000);
    });
  };

  return (
    <div className={style.sidebar}>
      <div className={style.sidebarHeader}>
        <h4>指标列表</h4>

        {!checkable && (
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => navigate("/assessment/index/create")}
          >
            新增指标
          </Button>
        )}
      </div>

      <DageTreeActions
        treeData={treeData}
        onAdd={checkable ? undefined : handleAddNode}
      />
    </div>
  );
};