//React
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//Wijmo
import * as wjcCore from 'wijmo/wijmo';
//Application
import { DataSvc } from '../services/DataSvc';

export class CurrentRecordManagement extends React.Component<any, any> {

    fieldNames = DataSvc.default.getNames();
    cvCRM = new wjcCore.CollectionView(DataSvc.default.getData(10));

    constructor(props) {
        super(props);
    }

    next() {
        this.cvCRM.moveCurrentToNext();
        this.forceUpdate();
    }

    moveCurrentTo(item) {
        this.cvCRM.moveCurrentTo(item);
        this.forceUpdate();
    }

    previous() {
        this.cvCRM.moveCurrentToPrevious();
        this.forceUpdate();
    }

    // current record management
    stopCurrent() {
        this.cvCRM.currentChanging.addHandler(this._stopCurrentIn4th);
    };

    // restore to be able to change current.
    reset() {
        this.cvCRM.currentChanging.removeHandler(this._stopCurrentIn4th);
        this.forceUpdate();
    };

    // forbid changing current when the current item is the 4th one.
    private _stopCurrentIn4th(sender, e) {
        // when the current is the 4rd item, stop moving.
        if (sender.currentPosition === 3) {
            e.cancel = true;
        }
    }

    render() {
        return <div>
             <h2>Current Record Management</h2>
             <p>
                 Since it implements the ICollectionView interface, you can use the CollectionView
                 class to manage the current record.
             </p>
             <p>
                 This example shows how you can use the API provided in the CollectionView class to
                 change the current record by clicking a row in the grid or by clicking buttons.
             </p>
             <p>
                 We use the <b>currentPosition</b> property to get the position of the current record
                 in the collection, and use the following methods to change the current position:
             </p>
             <ul>
                 <li>moveCurrentTo(item)</li>
                 <li>moveCurrentToFirst()</li>
                 <li>moveCurrentToLast()</li>
                 <li>moveCurrentToNext()</li>
                 <li>moveCurrentToPosition(index)</li>
                 <li>moveCurrentToPrevious()</li>
             </ul>
             <p>
                When the position changes, we use the <b>currentChanging</b> and <b>currentChanged</b> events
                  to track it. We can cancel the change of position in the <b>currentChanging</b> event.
                 
             </p>
             <p>
                 Click the <b>Next</b> button to set the next record as the current one. Click 
                 the <b>Previous</b> button to set the previous record as the current one. Click the
                 <b>Stop at 4th Row</b> button to prevent the current record from being changed once
                 it reaches the 4th row. Click the <b>Clear</b> button to remove the stop and allow
                 the current records to be changed freely.
             </p>
            <div className="row">
                <div className="col-md-6">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#cmJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#cmJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="cmJsx">
                            {' <div className="row-fluid well btn-group">\n'}
                            {'     <button className="btn btn-default" onClick={this.next.bind(this)}>Next</button>\n'}
                            {'     <button className="btn btn-default" onClick={this.previous.bind(this)}>Previous</button>\n'}
                            {'     <button className="btn btn-default" onClick={this.stopCurrent.bind(this)}>Stop at 4th Row</button>\n'}
                            {'     <button className="btn btn-default" onClick={this.reset.bind(this)}>Clear</button>\n'}
                            {' </div>\n'}
                            {' <div className="sGrid">\n'}
                            {'     <table className="table table-condensed table-bordered">\n'}
                            {'         <thead>\n'}
                            {'             <tr className="active">\n'}
                            {'                 {this.fieldNames.map((fieldName, index) => {\n'}
                            {'                     return <th key={index} className="text-center" >\n'}
                            {'                         {fieldName}\n'}
                            {'                     </th>\n'}
                            {'                 })}\n'}
                            {'             </tr>\n'}
                            {'         </thead>\n'}
                            {'         <tbody>\n'}
                            {'             {this.cvCRM.items.map((item, idx1) => {\n'}
                            {'                 return <tr key={idx1} className={item == this.cvCRM.currentItem ? "success" : ""}\n'}
                            {'                     onClick={this.moveCurrentTo.bind(this, item)} >\n'}
                            {'                     {this.fieldNames.map((fieldName, idx2) => {\n'}
                            {'                         let itm = wjcCore.Globalize.format(item[fieldName], \'\');\n'}
                           {'                         return <td key={idx2} className="text-center" >\n'}
                           {'                             {itm}\n'}
                           {'                         </td>\n'}
                           {'                     })}\n'}
                           {'                 </tr>\n'}
                           {'             })}\n'}
                           {'         </tbody>\n'}
                           {'     </table>\n'}
                           {' </div>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="cmJs">
                            {'   fieldNames = DataSvc.default.getNames();\n'}
                            {'   cvCRM = new wjcCore.CollectionView(DataSvc.default.getData(10));\n'}
                            {'\n'}
                            {'   constructor(props) {\n'}
                            {'       super(props);\n'}
                            {'   }\n'}
                            {'\n'}
                            {'   next() {\n'}
                            {'       this.cvCRM.moveCurrentToNext();\n'}
                            {'       this.forceUpdate();\n'}
                            {'   }\n'}
                            {'\n'}
                            {'   moveCurrentTo(item) {\n'}
                            {'       this.cvCRM.moveCurrentTo(item);\n'}
                            {'       this.forceUpdate();\n'}
                            {'   }\n'}
                            {'\n'}
                            {'   previous() {\n'}
                            {'       this.cvCRM.moveCurrentToPrevious();\n'}
                            {'       this.forceUpdate();\n'}
                            {'   }\n'}
                            {'\n'}
                            {'   // current record management\n'}
                            {'   stopCurrent() {\n'}
                            {'       this.cvCRM.currentChanging.addHandler(this._stopCurrentIn4th);\n'}
                            {'   };\n'}
                            {'\n'}
                            {'   // restore to be able to change current.\n'}
                            {'   reset() {\n'}
                            {'       this.cvCRM.currentChanging.removeHandler(this._stopCurrentIn4th);\n'}
                            {'       this.forceUpdate();\n'}
                            {'   };\n'}
                            {'\n'}
                            {'   // forbid changing current when the current item is the 4th one.\n'}
                            {'   private _stopCurrentIn4th(sender, e) {\n'}
                            {'       // when the current is the 4rd item, stop moving.\n'}
                            {'       if (sender.currentPosition === 3) {\n'}
                            {'           e.cancel = true;\n'}
                            {'       }\n'}
                            {'   }\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-6">
                    <h4>Result (live):</h4>
                     <div className="row-fluid well btn-group">
                        <button className="btn btn-default" onClick={this.next.bind(this)}>Next</button>
                        <button className="btn btn-default" onClick={this.previous.bind(this)}>Previous</button>
                        <button className="btn btn-default" onClick={this.stopCurrent.bind(this)}>Stop at 4th Row</button>
                        <button className="btn btn-default" onClick={this.reset.bind(this)}>Clear</button>
                     </div>
                    <div className="sGrid">
                        <table className="table table-condensed table-bordered">
                            <thead>
                                <tr className="active">
                                    {this.fieldNames.map((fieldName, index) => {
                                        return <th key={index} className="text-center" >
                                            {fieldName}
                                        </th>
                                    })}
                                </tr>
                            </thead>
                            <tbody>
                                {this.cvCRM.items.map((item, idx1) => {
                                    return <tr key={idx1} className={item == this.cvCRM.currentItem ? "success" : ""}
                                        onClick={this.moveCurrentTo.bind(this,item)} >
                                        {this.fieldNames.map((fieldName, idx2) => {
                                            let itm = wjcCore.Globalize.format(item[fieldName], '');
                                            return <td key={idx2} className="text-center" >
                                                {itm}
                                            </td>
                                        })}
                                    </tr>
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div >
        </div >;

    }
}

