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

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

    cvTrackingChangesExtra = new wjcCore.CollectionView(DataSvc.default.getData(6));
    colDefs = [ { header: 'id', binding: 'id',dataType:'Number' },
                { header: 'start', binding: 'start' },
                { header: 'country', binding: 'country' },
                { header: 'product', binding: 'product' },
                { header: 'color', binding: 'color' },
                { header: 'amount', binding: 'amount',dataType:'Number' },
                { header: 'active', binding: 'active',dataType:'Boolean' }
               ];
   current: any;
   constructor(props) {
        super(props);
        this.cvTrackingChangesExtra.trackChanges = true;
        // keep the original state of the current item in tracking Changes
        this.current = this.cvTrackingChangesExtra.currentItem ? JSON.stringify(this.cvTrackingChangesExtra.currentItem) : null;
        this.cvTrackingChangesExtra.currentChanged.addHandler((s, e) => {
            this.current = s.currentItem ? JSON.stringify(s.currentItem) : null;
        });

        // keep track of the original state of edited items
        var original = [];
        this.cvTrackingChangesExtra.itemsEdited.collectionChanged.addHandler((s, e: any) => {
            if (e.action == wjcCore.NotifyCollectionChangedAction.Add ||
                e.action == wjcCore.NotifyCollectionChangedAction.Change) {

                // check if we have this item's original data
                var index = this.cvTrackingChangesExtra.sourceCollection.indexOf(e.item);
                var found = -1;
                for (var i = 0; i < original.length && found < 0; i++) {
                    if (original[i].index == index) {
                        found = i;
                    }
                }

                // if we have the item, check original value
                if (found > -1) {

                    // if the current value is the same as the original, remove
                    var valueNow = JSON.stringify(e.item);
                    if (valueNow == original[found].value) {
                        original.splice(found, 1);
                        index = this.cvTrackingChangesExtra.itemsEdited.indexOf(e.item);
                        this.cvTrackingChangesExtra.itemsEdited.splice(index, 1);
                    }
                } else { // if we don't, store it now
                    found = original.length;
                    original.push({ index: index, value: this.current });
                }
            }
        });
    }

    render() {
        return <div>
                 <h2>Tracking changes with Customization</h2>
                 <p>
                     When you edit an item on a <b>CollectionView</b> with change tracking on, the
                     item is added to the <b>itemdEdited</b> collection. However, 
                     the <b>CollectionView</b> doesn't keep track of the item's original values, so
                     if you later edit it again and restore the original values, the item will
                     remain in the <b>itemdEdited</b> collection.
                 </p>
                 <p>
                     But you can change that behavior if you want. This example uses the events
                     exposed by the <b>CollectionView</b> and <b>itemsChanged</b> classes to keep
                     track if the original values for each item, and to remove items from 
                     the <b>itemsEdited</b> collection if the user restores the original values.
                 </p>
            <div className="row">
                <div className="col-md-6">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#tccJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#tccJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="tccJsx">
                           {'<h5>Change the data here</h5>\n'}
                           {'<wjFlexGrid.FlexGrid  className="sGrid"\n'}
                           {'    itemsSource={this.cvTrackingChangesExtra}\n'}
                           {'    allowAddNew={true}\n'}
                           {'    allowDelete={true} />\n'}
                           {' <h5>See the changes here</h5>\n'}
                           {' <h6>Items edited:</h6>\n'}
                           {' <wjFlexGrid.FlexGrid  className="tcGrid"\n'}
                           {'    style={{background:"#eeeeff"}}\n'}
                           {'    isReadOnly={true}\n'}
                           {'    itemsSource={this.cvTrackingChangesExtra.itemsEdited}\n'}
                           {'    columns={this.colDefs}\n'}
                           {'   <h6>Items added:</h6>\n'}
                           {'   <wjFlexGrid.FlexGrid  className="tcGrid"\n'}
                           {'    style={{background:"#eeeeff"}}\n'}
                           {'    isReadOnly={true}\n'}
                           {'    itemsSource={this.cvTrackingChangesExtra.itemsAdded}\n'}
                           {'    columns={this.colDefs}/>\n'}
                           {'    <h6>Items removed:</h6>\n'}
                           {'    <wjFlexGrid.FlexGrid  className="tcGrid"\n'}
                           {'    style={{background:"#eeeeff"}}\n'}
                           {'    isReadOnly={true}\n'}
                           {'    itemsSource={this.cvTrackingChangesExtra.itemsRemoved}\n'}
                           {'    columns={this.colDefs}/>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="tccJs">
                           {'cvTrackingChangesExtra = new wjcCore.CollectionView(DataSvc.default.getData(6));\n'}
                           {'colDefs = [ { header: \'id\', binding: \'id\',dataType:\'Number\' },\n'}
                           {'            { header: \'start\', binding: \'start\' },\n'}
                           {'            { header: \'country\', binding: \'country\' },\n'}
                           {'            { header: \'product\', binding: \'product\' },\n'}
                           {'            { header: \'color\', binding: \'color\' },\n'}
                           {'            { header: \'amount\', binding: \'amount\',dataType:\'Number\' },\n'}
                           {'            { header: \'active\', binding: \'active\',dataType:\'Boolean\' }\n'}
                           {'           ];\n'}
                           {'current: any;\n'}
                           {'constructor(props) {\n'}
                           {'    super(props);\n'}
                           {'    this.cvTrackingChanges.trackChanges = true;\n'}
                           {'      this.cvTrackingChangesExtra.trackChanges = true;\n'}
                           {'      // keep the original state of the current item in tracking Changes\n'}
                           {'     this.current = this.cvTrackingChangesExtra.currentItem ? JSON.stringify(this.cvTrackingChangesExtra.currentItem) : null;\n'}
                           {'     this.cvTrackingChangesExtra.currentChanged.addHandler((s, e) => {\n'}
                           {'         this.current = s.currentItem ? JSON.stringify(s.currentItem) : null;\n'}
                           {'     });\n'}
                           {'\n'}
                           {'     // keep track of the original state of edited items\n'}
                           {'     var original = [];\n'}
                           {'     this.cvTrackingChangesExtra.itemsEdited.collectionChanged.addHandler((s, e: any) => {\n'}
                           {'         if (e.action == wjcCore.NotifyCollectionChangedAction.Add ||\n'}
                           {'             e.action == wjcCore.NotifyCollectionChangedAction.Change) {\n'}
                           {'\n'}
                           {'             // check if we have this item\'s original data\n'}
                           {'             var index = this.cvTrackingChangesExtra.sourceCollection.indexOf(e.item);\n'}
                           {'             var found = -1;\n'}
                           {'             for (var i = 0; i < original.length && found < 0; i++) {\n'}
                           {'                 if (original[i].index == index) {\n'}
                           {'                     found = i;\n'}
                           {'                 }\n'}
                           {'             }\n'}
                           {'\n'}
                           {'             // if we have the item, check original value\n'}
                           {'             if (found > -1) {\n'}
                           {'\n'}
                           {'                 // if the current value is the same as the original, remove\n'}
                           {'                 var valueNow = JSON.stringify(e.item);\n'}
                           {'                 if (valueNow == original[found].value) {\n'}
                           {'                     original.splice(found, 1);\n'}
                           {'                     index = this.cvTrackingChangesExtra.itemsEdited.indexOf(e.item);\n'}
                           {'                     this.cvTrackingChangesExtra.itemsEdited.splice(index, 1);\n'}
                           {'                 }\n'}
                           {'             } else { // if we don\'t, store it now\n'}
                           {'                 found = original.length;\n'}
                           {'                 original.push({ index: index, value: this.current });\n'}
                           {'             }\n'}
                           {'         }\n'}
                           {'     });\n'}
                           {'}\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-6">
                    <h4>Result (live):</h4>
                    <h5>Change the data here</h5>
                    <wjFlexGrid.FlexGrid  className="sGrid"
                        itemsSource={this.cvTrackingChangesExtra}
                        allowAddNew={true}
                        allowDelete={true} />
                     <h5>See the changes here</h5>
                     <h6>Items edited:</h6>
                     <wjFlexGrid.FlexGrid  className="tcGrid"
                        style={{background:"#eeeeff"}}
                        isReadOnly={true}
                        itemsSource={this.cvTrackingChangesExtra.itemsEdited}
                        columns={this.colDefs} />
                       <h6>Items added:</h6>
                       <wjFlexGrid.FlexGrid  className="tcGrid"
                        style={{background:"#eeeeff"}}
                        isReadOnly={true}
                        itemsSource={this.cvTrackingChangesExtra.itemsAdded}
                        columns={this.colDefs} />
                        <h6>Items removed:</h6>
                        <wjFlexGrid.FlexGrid  className="tcGrid"
                        style={{background:"#eeeeff"}}
                        isReadOnly={true}
                        itemsSource={this.cvTrackingChangesExtra.itemsRemoved}
                        columns={this.colDefs}/>
                </div>
            </div >
        </div >;

    }
}

