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";

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 = () => {
  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>

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

      <DageTreeActions treeData={treeData} onAdd={handleAddNode} />
    </div>
  );
};
