import React, {Component} from 'react';
import {connect} from "react-redux";

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import { Tree } from "@blueprintjs/core";
import * as Classes from "@blueprintjs/core/lib/esm/common/classes";
import {Col, Grid, Row} from "react-bootstrap";
import FormUsers from "../Users/formUser";

import TablesGroupMembers from './tableGroupMembers';

import {
    getAllGroups,
    selectionGroup,
    getGroupMembers
} from "../../actions/groups";

import {
    selectionUser,
    getAllUsers
} from "../../actions/users";

import './ldapDir.css';
import PropTypes from "prop-types";


let expandedNodes = [];
let selectedNode = "";

function getGroupNode(group){
    return {
        id: group.DN,
        hasCaret: (group.Children && group.Children.length > 0) ? true: false,
        isExpanded: expandedNodes.indexOf(group.DN)!==-1,
        isSelected: group.DN === selectedNode,
        icon: "folder-close",
        label: group.DN.split(",")[0].substring(3,group.DN.length-3),
        childNodes: (group.Children||[]).map((val,i) => {return getGroupNode(val)})
    }
}

const mapStateToProps = state => {

    return {

        nodes : state.groups.map((val, i) => {
            return getGroupNode(val)
        }),

        selectedUserId: state.selectedUserId,
        selectedUser: state.selectedUser,

        selectedGroupId: state.selectedGroupId,
        selectedGroup: state.selectedGroup,

        allUsers: state.users,

        allMembers: state.members,

        hasErrored: state.groupHasErrored
    };

};

const mapDispatchToProps = dispatch => {

    return {

        fetchAllGroups: () => dispatch(getAllGroups()), // getAllGroups

        selectedGroup: groupDN => dispatch(selectionGroup(groupDN)),

        fetchAllUsers: () => dispatch(getAllUsers()),

        selectedUser: user => dispatch(selectionUser(user)), //getInfo relative ad un utente

        //fetchMembers: groupDN => dispatch(getGroupMembers(groupDN))

        fetchAllMembers: (groupDN) => dispatch(getGroupMembers(groupDN))


    }

};

class manageGroup extends Component {

    constructor(props) {

        super(props);

        this.state = {...this.props};

        this.state = {
            // selectedUserId: null,
            // selectedUser: null,
            selectedGroup: false,
            selectedGroupId: null,

            members: [],

            manageGroupInfoAlert: [
                "Per accedere alle operazioni consentite per la gestione del gruppo, bisogna prima selezionarne uno " +
                "dalla lista dei gruppi a sinistra."
            ],

        };

        this.handleNodeClick = this.handleNodeClick.bind(this);

    }

    forEachNode = (nodes, callback) => {
        if (nodes == null) {
            return;
        }

        for (const node of nodes) {
            callback(node);
            this.forEachNode(node.childNodes== null ? []: node.childNodes, callback);
        }
    };

    handleNodeCollapse = (nodeData) => {
        nodeData.isExpanded = false;
        nodeData.icon = "folder-close";
        let index =expandedNodes.indexOf(nodeData.id)
        if (index !== -1){
            expandedNodes.splice(index,1)
        }

        this.setState(this.state)
    };

    handleNodeExpand = (nodeData) => {
        nodeData.isExpanded = true;
        nodeData.icon = "folder-open";
        expandedNodes.push(nodeData.id)
        this.setState(this.state)
    };

    handleSearch = (props,e) => {

        let key = e.target.value.toLowerCase().trim();
        let nodes = this.props.nodes;
        let setVisible = function(node,li){
            let index = 0;
            delete node.visible;
            for(let n of node.childNodes){

                let _li = function(){
                    let ul = li.querySelector("ul");
                    let liEle = ul?ul.children : null;
                    if(liEle && liEle[index]){
                        return liEle[index];
                    }
                }();
                n.visible = setVisible(n,_li);

                if(!node.visible){
                    node.visible = n.visible;
                }
                index++;
            }
            if(!node.visible){
                node.visible = node.label.toLowerCase().match(key) != null;
                if(li)
                    li.style.display = node.visible?"block":"none";
            }

            return node.label.toLowerCase().match(key) != null;
        };

        let liElements = document.getElementById("ldap-entry").querySelector("ul").children;
        let index = 0;
        for(let n of nodes){
            let li = liElements[index];
            setVisible(n,li);
            li.style.display = n.visible?"block":"none";
            index++;
        }

    };

    comparer = (otherArray) => {
        return function(current){
            return otherArray.filter(function(other){
                return other.Uid == current.Uid && other.display == current.display
            }).length == 0;
        }
    };

    handleNodeClick = (nodeData, nodePath, e) => {

        const originallySelected = nodeData.isSelected;
        if (!e.shiftKey) {
            this.forEachNode(this.props.nodes, n => (n.isSelected = false));
        }
        nodeData.isSelected = originallySelected == null ? true : !originallySelected;
        if (nodeData.isSelected){
            selectedNode = nodeData.id
        } else {
            selectedNode = ""
        }

        // non so se servono altre info per ora gli passo solamente selectedNode così dall'altro componente è possibile fare le chiamate
        this.props.selectedGroup(selectedNode);

        this.state.selectedGroup = true;
        this.state.selectedGroupId = selectedNode;

        //this.setState(this.state);
        //this.props.fetchAllMembers(this.state.selectedGroupId);



        console.log('STATE: ', this.state);
        console.log('PROPS: ', this.props);

        debugger;

        console.log(this.state);

        // chiamata getMemebers => groupMembers

        // notMember => allUsers - groupMembers

        //console.log(this.state.selectedGroupId);
        //
        // return (
        //     <Asd />
        // );


        // console.log('this.props: ', this.props);
        //
        // debugger;
        //
        // console.log('this.props.fetchMembers(this.state.selectedGroupId)', this.props.fetchMembers(this.state.selectedGroupId));
        //
        // console.log(this.props);
        //
        //
        // if ( this.props.fetchMembers(this.state.selectedGroupId) === undefined ) {
        //     console.log('undefined');
        //
        //     const members = [{
        //         Cn: "dsdf",
        //         DN: "cn=dsdf,ou=people,dc=ticketag,dc=it",
        //         DisplayName: "",
        //         Groups: null,
        //         Mail: "nicholdngelucci@gmail.com",
        //         Sn: "dsdf",
        //         Uid: "nicholdngelucci@gmail.com",
        //     }, {
        //         Cn: "nicholasAngelucci",
        //         DN: "cn=nicholasAngelucci,ou=people,dc=ticketag,dc=it",
        //         DisplayName: "",
        //         Groups: null,
        //         Mail: "nissdgeludcci@ail.com",
        //         Sn: "nicd",
        //         Uid: "nissdgeludcci@ail.com"
        //     },{
        //         Cn: "nicholas",
        //         DN: "cn=nicholas,ou=people,dc=ticketag,dc=it",
        //         DisplayName: "",
        //         Groups: null,
        //         Mail: "nicholas.angelucci@gmail.com",
        //         Sn: "nicholas",
        //         Uid: "nicholas.angelucci@gmail.com"
        //     }];
        //
        //     let onlyInA = this.props.allUsers.filter(this.comparer(members));
        //     let onlyInB = members.filter(this.comparer(this.props.allUsers));
        //
        //     const result = onlyInA.concat(onlyInB);
        //     console.log(result);
        //
        //     this.state.addMember = result; // membri da aggiungere al gruppo
        //     this.state.removeMember = members; // membi da rimuovere dal gruppo
        //
        // }
        //
        // debugger;

    };

    componentDidMount() {
        console.log('START');
        this.props.fetchAllGroups();
        this.props.fetchAllMembers('cn=chievo%20verona,cn=Milan,ou=groups,dc=ticketag,dc=it');
        this.props.fetchAllUsers();
    };

    render() {

        return (

            <Row className="show-grid">

                <Col xs={6} md={4}  >
                    <div key="menu">
                        <code>{'<Col xs={6} md={4} />'};</code>
                        <div className="Sidebar">

                            <h2>Lista gruppi</h2>

                            {console.log('Lista gruppi', this.props)}

                            <div className="sb-content">
                                <div className="form-group">
                                    <input className="form-control" type="text" onKeyUp={this.handleSearch.bind(this,this.props.nodes)} placeholder="Cerca gruppo..." />
                                </div>
                                <div id="ldap-entry" className="ldap-dir">
                                    <Tree
                                        contents={this.props.nodes}
                                        onNodeClick={this.handleNodeClick}
                                        onNodeCollapse={this.handleNodeCollapse}
                                        onNodeExpand={this.handleNodeExpand}
                                        className={Classes.ELEVATION_0}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </Col>

                <Col xs={6} md={4} >
                    <code>{'<Col xs={6} md={4} />'};</code>
                    <div key="manageGroup">

                        <h2>Gestione gruppo</h2>
                        <p>Modifica ed elimina gruppo</p>

                        <span>
                            <h2>Gestione utenti</h2>
                            <div>
                                {this.state.selectedGroup === false ?
                                    <div className="alert alert-info" role="alert">
                                        {this.state.manageGroupInfoAlert.map((p, index) => <p key={index}>{p}</p>)}
                                    </div> : <TablesGroupMembers groupDN={this.state.selectedGroupId}/>
                                }
                            </div>
                        </span>

                    </div>
                </Col>

                <Col xs={6} md={4}>
                    <code>{'<Col xs={6} md={4} />'}</code>
                    <div key="adduser">

                    </div>
                </Col>

            </Row>

        );

    }

}

manageGroup.propTypes = {
    //fetchData: PropTypes.func.isRequired,
    groups: PropTypes.array,
    members: PropTypes.array,
    hasErrored: PropTypes.bool.isRequired,
    //isLoading: PropTypes.bool.isRequired
};

const ManageUsers = connect(mapStateToProps, mapDispatchToProps)(manageGroup);
export default ManageUsers;