import React, { Component } from "react";
import './style.css';
import './render.scss';
import './inputsPivots.scss';
//import {treeToHtml} from './drawTreeFunction';
import {loading} from './img RT/loading.gif';
import equal from 'fast-deep-equal'
import { addInputs} from "./changePivot";



export default class RenderTree extends Component {
    constructor(props) {
      super(props);

      this.state = {
        isLoading: true,
        counter: -1
      };

    }
    componentDidMount() {
        this.setState({isLoading: false});
    }
    //handlePrint()
    componentDidUpdate(prevProps)
    {
      if(!equal(this.props.readyToRender, prevProps.readyToRender)) // Check if it's a new user, you can also use some unique property, like the ID  (this.props.user.id !== prevProps.user.id)
      {
        this.drawTree(this.props.readyToRender);
      }

    }

    treeToHtml(tree) {
      // only leafs containing category
      if (tree.category) {
          return  ['<ul>',
                      '<li>',
                          '<a href="#">',
                              '<b>', tree.category, '</b>',
                          '</a>',
                      '</li>',
                   '</ul>'].join('');
      }

        console.log(this.state.counter)
        this.setState(prevState => {
          return {counter: prevState.counter + 1}
       })


      return  ['<ul>',
                  '<li>',
                      '<a href="#">',
                          '<b>', tree.attribute, ' ', tree.predicateName, ' ', tree.pivot, ' ?</b>',
                           '<input class="pivots" id=',this.state.counter,' type="text" value="',tree.pivot,'" />',
                           '<input class="pivotal" id=',this.state.counter,' type="submit" value="OK" onclick="',this.updateBranch(this.id),'"/>',
                      '</a>',
                      '<ul>',
                          '<li>',
                              '<a href="#">yes</a>',
                              this.treeToHtml(tree.match),
                          '</li>',
                          '<li>',
                              '<a href="#">no</a>',
                              this.treeToHtml(tree.notMatch),
                          '</li>',
                      '</ul>',
                  '</li>',
               '</ul>'].join('');
  }

  updateBranch = (id) => { console.log(id)}

    drawTree(prop)
    {
      if(prop!==undefined)
      {
        var tree=prop;
        document.getElementById('displayTree').innerHTML = this.treeToHtml(tree.root);
        addInputs(this.props.categoryAttr,this.props.uniqueID);
      }
    }
    render() {
        return (
          <div className='renderTree'>
            {/* <button className='btn' id="drawBtn" onClick={this.handlePrint}>Draw tree</button> */}
            {this.state.isLoading ?
              <div className='renderTree_loading'>{loading}Loading..</div>
              : // if
              <div className="tree" id="displayTree"></div>
            }
          </div>
        );
      }
}