//React
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//Wijmo
import * as wjcCore from 'wijmo/wijmo';
import * as wjcGridFilter from 'wijmo/wijmo.grid.filter';
import * as wjMultiRow from 'wijmo/wijmo.react.grid.multirow';
//Application
import { DataService } from '../services/DataSvc';

export class FilteringMultiRow extends React.Component<any, any> {
    orders = DataService.default.orders;
    layoutDefs = DataService.default.ldThreeLines;

    constructor(props) {
        super(props);
        this.state = {
            layoutDefinition: this.layoutDefs
        }
    }

    initialized(s) {
        var filter = new wjcGridFilter.FlexGridFilter(s);
    }

    render() {
        return <div>
            <h2>
                Filtering
        </h2>
            <p>
                The <b>MultiRow</b> control supports filtering just like <b>FlexGrid</b>.
        </p>
            <p>
                Filtering is provided by the <b>wijmo.grid.filter.FlexGridFilter</b> class.
            To add filtering UI to <b>MultiRow</b>, create a <b>FlexGridFilter</b> and 
            pass <b>MultiRow</b> as a parameter in the constructor.
        </p>


            <div className="row">
                <div className="col-md-5">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#fmrJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#fmrJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="fmrJsx">
                            {'<wjMultiRow.MultiRow\n'}
                            {'    itemsSource={this.orders}\n'}
                            {'    layoutDefinition={this.state.layoutDefinition}\n'}
                            {'    initialized={this.initialized.bind(this)}>\n'}
                            {'</wjMultiRow.MultiRow>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="fmrJs">
                            {'initialized(s) {\n'}
                            {'    var filter = new wjcGridFilter.FlexGridFilter(s);\n'}
                            {'}\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-7">
                    <h4>Result (live):</h4>
                    <wjMultiRow.MultiRow
                        itemsSource={this.orders}
                        layoutDefinition={this.state.layoutDefinition}
                        initialized={this.initialized.bind(this)}>
                    </wjMultiRow.MultiRow>
                </div>
            </div>
        </div>;
    }
}

