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

const data = [
  {
    id: "0-0",
    content: "0-0",
    children: [
      {
        id: "0-0-0",
        content: "0-0-0",
        children: [
          { id: "0-0-0-0", content: "0-0-0-0" },
          { id: "0-0-0-1", content: "0-0-0-1" },
        ],
      },
      {
        id: "0-0-1",
        content: "0-0-1",
        children: [
          { id: "0-0-1-0", content: "0-0-1-0" },
          { id: "0-0-1-1", content: "0-0-1-1" },
          { id: "0-0-1-2", content: "0-0-1-2" },
        ],
      },
    ],
  },
];

export default function TreeFilterExample() {
  const [value, setValue] = useState("");
  const [selectIds, setSelectIds] = useState(["0-0-0-1"]);

  const handleFilter = node => {
    return node.content.includes(value);
  };

  return (
    <>
      <Input
        value={value}
        onChange={value => {
          setValue(value);
        }}
      />
      <Tree
        data={data}
        selectable
        selectedIds={selectIds}
        onSelect={(value, context) => {
          console.log(value, context);
          setSelectIds(value);
        }}
        filterState={!!value}
        filter={handleFilter}
        defaultExpandedIds={["0-0", "0-0-0"]}
      />
    </>
  );
}