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

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 TreeActiveExample() {
  const [fullActivable, setFullActivable] = useState(false);
  return (
    <>
      <div style={{ marginBottom: 16 }}>
        <Switch
          value={fullActivable}
          onChange={value => setFullActivable(value)}
        >
          整行可点击
        </Switch>
      </div>
      <Tree
        data={data}
        fullActivable={fullActivable}
        activable
        onActive={ids => console.log(ids)}
        defaultExpandedIds={["0-0", "0-0-0"]}
      />
    </>
  );
}