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

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

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

    constructor(props) {
        super(props);
    }

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

    lazyLoadFunction(node: wjcNav.TreeNode, callback: Function) {
        setTimeout(function () { // simulate http delay
            var result = [ // simulate result
                { header: 'Another lazy node...', items: [] },
                { header: 'A non-lazy node without children' },
                {
                    header: 'A non-lazy node with child nodes', items: [
                        { header: 'hello' },
                        { header: 'world' }
                    ]
                }
            ];
            callback(result); // return result to control
        }, 2500); // 2.5sec http delay
    }

    render() {
        return <div>
            <h2>Lazy Loading</h2>
            <p>
                Lazy loading is useful when you are dealing with large hierarchical data sources
                and would like to avoid the delays involved in loading the entire data set at once.</p>
            <p>
                The TreeView control makes lazy-loading super easy. Only two steps are required:</p>
            <ol>
                <li>
                    Set the <b>items</b> property in the parent node data item to an empty array.</li>
                <li>
                    Set the TreeView's <b>lazyLoadFunction</b> property to a function to be called
                    when the user expands the node. This function takes two parameters: the parent node
                    and a callback function to be invoked when the data becomes available.</li>
            </ol>
            <p>
                The tree in example below starts with three lazy-loaded nodes.
                When you expand them, the <b>lazyLoadFunction</b> is invoked. The function
                uses a setTimeout to simulate an http delay and returns data for three child nodes,
                one of which is also a lazy-loaded node.</p>
            <p>
                The example also uses some CSS to animate the node icons while they are being
                loaded.</p>

            <div className="row">
                <div className="col-md-5">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#llJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#llJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="llJsx">
                            {'<wjNav.TreeView\n'}
                            {'    initialized={this.initialized.bind(this)}\n'}
                            {'    itemsSource={this.lazyItems}\n'}
                            {'    displayMemberPath={\'header\'}\n'}
                            {'    childItemsPath={\'items\'}\n'}
                            {'    lazyLoadFunction={this.lazyLoadFunction.bind(this)} />\n'}
                        </div>
                        <div className="tab-pane pane-content" id="llJs">
                            {'   this.lazyItems = [ // start with three lazy-loaded nodes\n'}
                            {'       {header: \'Lazy Node 1\', items: [] },\n'}
                            {'       {header: \'Lazy Node 2\', items: [] },\n'}
                            {'       {header: \'Lazy Node 3\', items: [] }\n'}
                            {'   ];\n'}
                            {' \n'}
                            {' initialized(s) {\n'}
                            {'     this.treeView = s;\n'}
                            {' }\n'}
                            {' \n'}
                            {' lazyLoadFunction(node: wjcNav.TreeNode, callback: Function) {\n'}
                            {'     setTimeout(function () { // simulate http delay\n'}
                            {'         var result = [ // simulate result\n'}
                            {'             { header: \'Another lazy node...\', items: [] },\n'}
                            {'             { header: \'A non-lazy node without children\' },\n'}
                            {'             {\n'}
                            {'                 header: \'A non-lazy node with child nodes\', items: [\n'}
                            {'                     { header: \'hello\' },\n'}
                            {'                     { header: \'world\' }\n'}
                            {'                 ]\n'}
                            {'             }\n'}
                            {'         ];\n'}
                            {'         callback(result); // return result to control\n'}
                            {'     }, 2500); // 2.5sec http delay\n'}
                            }\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-7">
                    <h4>Result (live):</h4>
                    <wjNav.TreeView
                        initialized={this.initialized.bind(this)}
                        itemsSource={this.lazyItems}
                        displayMemberPath={'header'}
                        childItemsPath={'items'}
                        lazyLoadFunction={this.lazyLoadFunction.bind(this)}/>
                </div>
            </div>
        </div>;
    }
}

