/**
 * desc: （除点击 SwitcherIcon 外的）展开/折叠操作，默认 `false`，可选 `单击` / `双击` 节点（建议不要同时开启 selectable 或 checkable）
 */
import React, { useState } from 'react'
import { Tree, TreeNodeKey, RadioGroup, Radio } from 'react-icecream'

import { treeData } from './tree-data'

export default function Demo() {
  const [expandAction, setExpandAction] = useState<false | 'click' | 'doubleClick'>('click')

  function handleExpandedKeysChange(keys: TreeNodeKey[]) {
    console.log('expanded keys: ', keys.toString())
  }

  return (
    <>
      <p>
        ExpandAction:&nbsp;&nbsp;&nbsp;
        <RadioGroup value={expandAction} onChange={setExpandAction}>
          <Radio value={false}>false</Radio>
          <Radio value="click">click</Radio>
          <Radio value="doubleClick">doubleClick</Radio>
        </RadioGroup>
      </p>
      <br />
      <Tree
        expandAction={expandAction}
        treeData={treeData}
        defaultExpandedKeys={['1', '2']}
        onExpandedKeysChange={handleExpandedKeysChange}
      />
    </>
  )
}