import React, { Component } from 'react'
import {treeActions} from '../_actions'
import { connect } from 'react-redux';
import Node from './Node/Node'
import './style.css'
import ContextMenu from './ContextMenu'
import {AddNodeModal} from './Modals/AddNodeModal'
import { EditNodeModal } from './Modals/EditNodeModal';

class TreePage extends Component {

    state = {
        activeNode: 0,
        activeNodeName: '',
        showContextMenu: false,
        top:0,
        left:0,
        showAddNodeModal: false,
        showEditNodeModal: false
      }
    
    componentDidMount(){
      //document.addEventListener('click', this.hideContextMenu.bind(this))
      this.props.getTree()
    }
    componentWillUnmount(){
      //document.removeEventListener('click',this.hideContextMenu.bind(this))
    }
    hideContextMenu(){
      this.setState({showContextMenu: false})
    }
    setActiveNode(id) {   
        this.setState({activeNode: id})
    }
    handleOnContextMenu(event, id, name){
        event.preventDefault()
        
        this.setActiveNode(id)
        this.setState({activeNodeName: name, showContextMenu: true, left: event.clientX, top: event.clientY})   
    }

    renderSubNodes(subNodes) {
        const {activeNode} = this.state
        return (
          <ul>
            {subNodes.map((node) => (
                <React.Fragment>
                    <li>
                        <div onContextMenu={(event) => this.handleOnContextMenu(event, node.nodeId, node.name)} className={activeNode===node.nodeId?"bgSelected":""} key={node.nodeId} onClick={() => this.setActiveNode(node.nodeId)}>
                            <Node name={node.name}/>
                        </div>
                        {node.subNodes.length > 0 && this.renderSubNodes(node.subNodes)}
                    </li>
                </React.Fragment>
            ))}
          </ul>
        );
      }

    render() {
        const tree2 = this.props.tree.items;
        
        
        console.log(this.state.activeNodeName)
        const {showAddNodeModal, showEditNodeModal} = this.state
        return(
            <React.Fragment>
                {tree2 && this.renderSubNodes(tree2)}
                {this.state.showContextMenu? <ContextMenu  showAddNodeModal={() => this.setState({showAddNodeModal:true})} showEditNodeModal={() => this.setState({showEditNodeModal:true})} left={this.state.left} top={this.state.top}/>:''}
                
                <AddNodeModal
                  show={showAddNodeModal} 
                  onHide={() => this.setState({showAddNodeModal:false})}
                  parentNodeId={this.state.activeNode}
                />

                <EditNodeModal
                  show={showEditNodeModal}
                  onHide={() => this.setState({showEditNodeModal: false})}
                  nodeId={this.state.activeNode}
                  nodeName={this.state.activeNodeName}
                />

            </React.Fragment>
        )
    }
}
function mapState(state){
    

    return state;
}
const actionCreators = {
    getTree: treeActions.getTree
}

const connectedApp = connect(mapState, actionCreators)(TreePage)
export {connectedApp as TreePage}