// @ts-nocheck
import React, { useState } from "react";
import { Tree } from "@tencent/tea-component";

function getNode(nodes, id) {
  for (const node of nodes) {
    if (node.id === id) {
      return node;
    }
    if (node.children) {
      const result = getNode(node.children, id);
      if (result) {
        return result;
      }
    }
  }
  return null;
}

export default function TreeDynamicExample() {
  const [selectIds, setSelectIds] = useState();

  const [data, setData] = useState([
    { content: "0-0", id: "0-0", expandable: true },
  ]);

  function onLoad(id) {
    return new Promise((resolve, reject) => {
      const node = getNode(data, id);

      if (node.children) {
        resolve();
        return;
      }

      setTimeout(() => {
        // 模拟失败
        if (Math.random() > 0.85) {
          reject(new Error("Load Error"));
          return;
        }

        Object.assign(node, {
          children: [
            {
              content: `${node.id}-0`,
              id: `${node.id}-0`,
              expandable: true,
            },
            {
              content: `${node.id}-1`,
              id: `${node.id}-1`,
              expandable: true,
            },
          ],
        });

        setData([...data]);
        resolve();
      }, 1000);
    });
  }

  return (
    <Tree
      selectable
      data={data}
      onLoad={onLoad}
      onLoadError={(id, err) => console.warn(id, err)}
      selectedIds={selectIds}
      onSelect={(value, context) => {
        console.log(value, context);
        setSelectIds(value);
      }}
    />
  );
}