//React
import * as React from 'react';
import * as ReactDOM from 'react-dom';

//Wijmo
import * as wjcCore from 'wijmo/wijmo';
import * as wjNav from 'wijmo/wijmo.react.nav';
//Application
import { DataService } from '../services/DataSvc';

export class DisabledNodes extends React.Component<any, any> {
    items = DataService.default.items;
    treeView = null;

    constructor(props) {
        super(props);
    }

    initialized(s) {
        this.treeView = s;
    }

    // 'Navigation' display
    disableNode() {
        var nd = this.treeView.selectedNode;
        if (nd) {
            nd.isDisabled = true;
        }
    }

    enableAllNodes(checked: boolean) {
        for (var nd = this.treeView.getFirstNode(); nd; nd = nd.next()) {
            nd.isDisabled = false;
        }
    }


    render() {
        return <div>
            <h2>Disabled Nodes</h2>
            <p>
                You can disable nodes using the TreeNode's <b>isDisabled</b> property.
                Disabled nodes cannot be selected using the mouse or keyboard.</p>

            <div className="row">
                <div className="col-md-5">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#imgJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#imgJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="imgJsx">
                            {'<wjNav.TreeView\n'}
                            {'    initialized={this.initialized.bind(this)}\n'}
                            {'    itemsSource={this.items}\n'}
                            {'    displayMemberPath={\'header\'}\n'}
                            {'    childItemsPath={\'items\'} />\n'}
                            {'<button id="btnDisableNode" className="btn btn-default" onClick={this.disableNode.bind(this)}>\n'}
                            {'    Disable Selected Node\n'}
                            {'</button>\n'}
                            {'<button id="btnEnableAllNodes" className="btn btn-default" onClick={this.enableAllNodes.bind(this)}>\n'}
                            {'    Enable All Nodes\n'}
                            {'</button>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="imgJs">
                            {'initialized(s) {\n'}
                            {'    this.treeView = s;\n'}
                            {'}\n'}
                            {'\n'}
                            {'// \'Navigation\' display\n'}
                            {'disableNode() {\n'}
                            {'    var nd = this.treeView.selectedNode;\n'}
                            {'    if (nd) {\n'}
                            {'        nd.isDisabled = true;\n'}
                            {'    }\n'}
                            {'}\n'}
                            {'\n'}
                            {'enableAllNodes(checked: boolean) {\n'}
                            {'    for (var nd = this.treeView.getFirstNode(); nd; nd = nd.next()) {\n'}
                            {'        nd.isDisabled = false;\n'}
                            {'    }\n'}
                            {'}\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-7">
                    <h4>Result (live):</h4>
                    <wjNav.TreeView
                        initialized={this.initialized.bind(this)}
                        itemsSource={this.items}
                        displayMemberPath={'header'}
                        childItemsPath={'items'} />
                    <button id="btnDisableNode" className="btn btn-default" onClick={this.disableNode.bind(this)}>
                        Disable Selected Node
                    </button>
                    <button id="btnEnableAllNodes" className="btn btn-default" onClick={this.enableAllNodes.bind(this)}>
                        Enable All Nodes
                    </button>
                </div>
            </div>
        </div>;
    }
}

