import React, { useState, useEffect, useContext, useRef, memo } from 'react';

// import { Tree } from 'antd';
// const { TreeNode } = Tree;
import Tree, { TreeNode } from 'rc-tree';
import 'rc-tree/assets/index.css';

const $ = window.$;
export default function RepoTree(props) {
    const { fileTreeData, onLoadData, onTreeSelect, fileTreeSelectedKeys, loadRepoFiles } = props;
    const [expandedKeys, setExpandedKeys] = useState([])
    useEffect(() => {
        loadRepoFiles()
    }, [])

    if (!fileTreeData || fileTreeData.length === 0) {
        return ""
    }

    const onExpand = (expandedKeys) => {
        // console.log('onExpand', arguments);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        setExpandedKeys(expandedKeys)
    }

    const loop = (data) => {
        return data.map((item) => {
            if (item.children) {
                return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
            }
            return (
                <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} />
            );
        });
    };
    const treeNodes = loop(fileTreeData);
    
    
    // selectable={false}
    return (
        <Tree
            onExpand={onExpand}
            expandedKeys={expandedKeys}
            // autoExpandParent={this.state.autoExpandParent}
            loadData={onLoadData}
            
            selectedKeys={fileTreeSelectedKeys}
            onSelect={onTreeSelect}
        >
            {treeNodes}
        </Tree>
    )
}