// import * as React  from 'react';
// import * as PropTypes from 'prop-types';
// import { RecordsListView } from '../RecordsListView';
// const TreeView = React.createClass({
//   propTypes: {
//     collapsed: PropTypes.bool,
//     defaultCollapsed: PropTypes.bool,
//     nodeLabel: PropTypes.node.isRequired,
//     className: PropTypes.string,
//     itemClassName: PropTypes.string,
//   },

//   getInitialState() {
//     return {collapsed: this.props.defaultCollapsed};
//   },

//   handleClick(...args : any) {
//     this.setState({collapsed: !this.state.collapsed});
//     if (this.props.onClick) {
//       this.props.onClick(...args);
//     }
//   },

//   selectedRecordChanged() {

//   },

//   render() {
//     const {
//       collapsed = this.state.collapsed,
//       className = '',
//       itemClassName = '',
//       nodeLabel,
//       children,
//       ...rest
//     } = this.props;

//     let arrowClassName = 'tree-view_arrow';
//     let containerClassName = 'tree-view_children';
//     if (collapsed) {
//       arrowClassName += ' tree-view_arrow-collapsed';
//       containerClassName += ' tree-view_children-collapsed';
//     }

//     const arrow =
//       <div
//         {...rest}
//         className={className + ' ' + arrowClassName}
//         onClick={this.handleClick}/>;

//     return (
//       <div className="tree-view">
//         <div className={'tree-view_item ' + itemClassName}>
//           {arrow}
//           {nodeLabel}
//         </div>
//         <div className={containerClassName}>
//           {/* {children} */}
//           <RecordsListView TotalPages={this.props.totalPages} Records={this.props.Records}
//                             LoadRecordsWithNewCriteria={this.loadRecordsWithNewCriteria.bind(this)}
//                             SelectedRecordChanged={this.selectedRecordChanged.bind(this)}>
//           </RecordsListView>
//         </div>
//       </div>
//     );

    
//   },
// });

// export default TreeView;
import * as React from 'react';
// import { RecordsListView } from '../RecordsListView';

 
class TreeView extends React.Component<any, any> {
  constructor(props: any) {
    //debugger;
    super(props);
    this.state = { 
      collapsed:false,
      defaultCollapsed: false,
      nodeLabel: '',
      className: '',
      itemClassName : ''
    };
  }

    getInitialState() {
    return {collapsed: this.props.defaultCollapsed};
  }

  handleClick(...args : any[]) {
    this.setState({collapsed: !this.state.collapsed});
    if (this.props.onClick) {
      this.props.onClick(...args);
    }
  }

  selectedRecordChanged() {

  }

  render() { 
    //debugger;
        const {
      collapsed = this.state.collapsed,
      className = '',
      itemClassName = '',
      nodeLabel,
      children,
      ...rest
    } = this.props;

    let arrowClassName = 'tree-view_arrow';
    let containerClassName = 'tree-view_children';
    if (collapsed) {
      arrowClassName += ' tree-view_arrow-collapsed';
      containerClassName += ' tree-view_children-collapsed';
    }

    const arrow =
      <div
        {...rest}
        className={className + ' ' + arrowClassName}
        onClick={this.handleClick}/>;
        //debugger;

    return (
      <div className="tree-view">
             <div className={'tree-view_item ' + itemClassName}>
               {arrow}
               {nodeLabel}
             </div>
             <div className={containerClassName}>
               {/* {children} */}
            </div>
           </div>
     );
  }
}
 
export default TreeView;