/**
 * Created by baoyinghai on 6/28/17.
 */
import React from 'react';

import './index.less';

export default class ARTSetting extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      focusNode: {}
    };
  }

  _renderARTree = node => {
    if (!node) return null;
    if (node.nodeType === 'CONTAINER') {
      return (
        <li>
          <span onClick={() => this._changeNodeFocus(node)}>{node.name}</span>
          <ul>
            {node.childrenNode && node.childrenNode.map(this._renderARTree)}
          </ul>
        </li>
      );
    }
    return (
      <li>
        <span onClick={() => this._changeNodeFocus(node)}>{node.name}</span>
      </li>
    );
  };

  _changeNodeFocus = node => {
    this.setState({
      focusNode: node
    });
  };

  render() {
    const { ART } = this.props;
    return (
      <div className="art-container">
        <div className="art-tree">
          <ul>
            {this._renderARTree(ART)}
          </ul>
        </div>
        <div>
          {this.state.focusNode && JSON.stringify(this.state.focusNode)}
        </div>
      </div>
    );
  }
}
