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

const data = [
  {
    id: `0-0`,
    content: `0-0`,
    children: Array(1000)
      .fill(null)
      .map((_, index) => ({
        id: `0-0-${index}`,
        content: `0-0-${index}`,
        children: Array(10)
          .fill(null)
          .map((_, cIndex) => ({
            id: `0-0-${index}-${cIndex}`,
            content: `0-0-${index}-${cIndex}`,
            children: Array(5)
              .fill(null)
              .map((_, ccIndex) => ({
                id: `0-0-${index}-${cIndex}-${ccIndex}`,
                content: `0-0-${index}-${cIndex}-${ccIndex}`,
              })),
          })),
      })),
  },
];

export default function TreeExample() {
  const [selectIds, setSelectIds] = useState(["0-0-0-1"]);
  return (
    <Tree
      data={data}
      selectable
      selectedIds={selectIds}
      onSelect={(value, context) => {
        console.log(value, context);
        setSelectIds(value);
      }}
      defaultExpandedIds={["0-0", "0-0-0"]}
      height={350}
    />
  );
}