import * as React from "react";
// import TreeView from "../TreeView";
import TreeView from "react-treeview";
//import { RecordsListView } from "..";
import "./index.css";
import { RecordsListView } from "../RecordsListView";
// const dataSource = [
//   {
//     type: "Employees",
//     collapsed: false,
//     people: [
//       // {
//       //   name: "Paul Gordon",
//       //   age: 25,
//       //   sex: "male",
//       //   role: "coder",
//       //   collapsed: false
//       // },
//       // {
//       //   name: "Sarah Lee",
//       //   age: 23,
//       //   sex: "female",
//       //   role: "jqueryer",
//       //   collapsed: false
//       // }
//     ]
//   },
//   {
//     type: "CEO",
//     collapsed: false,
//     people: [
//       {
//         name: "Drew Anderson",
//         age: 35,
//         sex: "male",
//         role: "boss",
//         collapsed: false
//       }
//     ]
//   }
// ];

class GroupedListView extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {selectedItem: ''};
  }
  handleClick(id: any) {}
  onCollapeTree(id: any){
    this.props.onCollapse(id)
  }
  
  private _selectedRecordChanged(item: any){
    //debugger;
    this.setState({selectedItem: item});
    this.props.selectedRecordChanged(item);
  }
  render() {
    return (
      <div>
        {/* {this.props.Records.map((el: any, i: number) => {
          const label = (
            <span className="node" onClick={this.handleClick.bind(null, el.id)}>
              {el.name} {i}
            </span>
          );

          <TreeView items={el} key={i} nodeLabel={label}>
            <RecordsListView
              TotalPages={this.props.totalPages}
              Records={this.props.Records}
              // LoadRecordsWithNewCriteria={this.loadRecordsWithNewCriteria.bind(this)}
              //  SelectedRecordChanged={this.selectedRecordChanged.bind(this)}
            />
          </TreeView>;
        })} */}

        {this.props.Records.map((node: any, i: any) => {
          const name = node.name;
          const label = <span className="node" onClick={this.onCollapeTree.bind(this, node.id)}>{name}</span>;
          return (
            <TreeView
              key={name + "|" + i}
              nodeLabel={label}
              defaultCollapsed={false}
            >
              <RecordsListView
                TotalPages={this.state.totalPages}
                Records={node.conversations}
                // LoadRecordsWithNewCriteria={this.loadRecordsWithNewCriteria.bind(this)}
                SelectedRecordChanged={this._selectedRecordChanged.bind(this)}
              />
            </TreeView>
          );
        })}
      </div>
    );
  }
}

export default GroupedListView;
