import { TreeSelect, Row, Col } from '@btri-ui/base';
import React, { useState } from 'react';

const App = () => {
  const [value, setValue] = useState();
  const [treeData, setTreeData] = useState([
    {
      id: 1,
      pId: 0,
      value: '1',
      title: 'Expand to load',
    },
    {
      id: 2,
      pId: 0,
      value: '2',
      title: 'Expand to load',
    },
    {
      id: 3,
      pId: 0,
      value: '3',
      title: 'Tree Node',
      isLeaf: true,
    },
  ]);

  const genTreeNode = (parentId, isLeaf = false) => {
    const random = Math.random()
      .toString(36)
      .substring(2, 6);
    return {
      id: random,
      pId: parentId,
      value: random,
      title: isLeaf ? 'Tree Node' : 'Expand to load',
      isLeaf,
    };
  };

  const onLoadData = ({ id }) =>
    new Promise(resolve => {
      setTimeout(() => {
        setTreeData(
          treeData.concat([
            genTreeNode(id, false),
            genTreeNode(id, true),
            genTreeNode(id, true),
          ]),
        );
        resolve(undefined);
      }, 300);
    });

  const onChange = newValue => {
    console.log(newValue);
    setValue(newValue);
  };

  return (
    <Row autoMode>
      <Col span={4}>
        <TreeSelect
          treeDataSimpleMode
          value={value}
          onChange={onChange}
          loadData={onLoadData}
          treeData={treeData}
          multiple
          treeCheckable={true}
        />
      </Col>
    </Row>
  );
};

export default App;