//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 Editing extends React.Component<any, any> {

    fieldNames = DataSvc.default.getNames();
    cvEditing = new wjcCore.CollectionView(DataSvc.default.getData(10));
    currentItem: any;
    inputId: HTMLInputElement;
    inputStart: HTMLInputElement;
    inputEnd: HTMLInputElement;
    inputCountry: HTMLInputElement;
    inputProduct: HTMLInputElement;
    inputColor: HTMLInputElement;
    inputAmount: HTMLInputElement;
    inputActive: HTMLInputElement;

    constructor(props) {
        super(props);
        this.currentItem = this.cvEditing.currentItem;
        this.state = {
            currentItem: this.currentItem,
            id: this.currentItem.id,
            start: wjcCore.Globalize.format(this.currentItem.start, ''),
            end: wjcCore.Globalize.format(this.currentItem.end, ''),
            country: this.currentItem.country,
            product: this.currentItem.product,
            color: this.currentItem.color,
            amount: wjcCore.Globalize.format(this.currentItem.amount, ''),
            active: this.currentItem.active
        }
        // define the new item value.
        this.cvEditing.newItemCreator = () => {
            var item = DataSvc.default.getData(1)[0];

            // aggregate the max value of id in the collection.
            item.id = wjcCore.getAggregate(wjcCore.Aggregate.Max, this.cvEditing.sourceCollection, 'id') + 1;
            this.setState({ currentItem: item });
            return item;
        }
        // syn the scope currentItem with the collectionview.
        this.cvEditing.currentChanged.addHandler(() => {
            this.currentItem = this.cvEditing.currentItem;
            this.setState({ currentItem: this.currentItem });
            this.updateItemDetail();
        });
    }

    moveCurrentTo(item) {
        this.cvEditing.moveCurrentTo(item);
        this.setState({ currentItem: item });
    }

    editItem() {
        this.cvEditing.editItem(this.currentItem);
    }

    addNew() {
        this.cvEditing.addNew();
    }

    remove() {
        this.cvEditing.remove(this.currentItem);
        this.forceUpdate();
    }

    // editing
    confirmUpdate() {
        // commit editing/adding
        this.cvEditing.currentItem.id = this.inputId.value;
        var updatedItem = this.getUpdatedData(),
            names = this.fieldNames;

        // update the item's values
        for (var i = 0; i < names.length; i++) {
            var fName = names[i];
            this.cvEditing.currentItem[fName] = updatedItem[fName];
        }
        this.cvEditing.commitEdit();
        this.cvEditing.commitNew();
        this.forceUpdate();
    };

    cancelUpdate() {
        // cancel editing or adding
        this.cvEditing.cancelEdit();
        this.cvEditing.cancelNew();
        this.setState({ currentItem: this.currentItem });
        this.updateItemDetail();
    };

    // get edited content from the dialog
    private getUpdatedData() {
        var item,
            content = this.inputId.value;
        item = {};
        if (content) {
            item.id = wjcCore.Globalize.parseInt(content);
        }
        content = this.inputStart.value;
        if (content) {
            item.start = wjcCore.Globalize.parseDate(content, '');
        }
        content = this.inputEnd.value;
        if (content) {
            item.end = wjcCore.Globalize.parseDate(content, '');
        }
        item.country = this.inputCountry.value;
        item.product = this.inputProduct.value;
        item.color = this.inputColor.value;
        content = this.inputAmount.value;
        if (content) {
            item.amount = wjcCore.Globalize.parseFloat(content);
        }
        item.active = this.inputActive.checked;
        return item;
    }

    private updateItemDetail() {
        this.inputId.value = this.currentItem.id;
        this.inputStart.value = wjcCore.Globalize.format(this.currentItem.start, '');
        this.inputEnd.value = wjcCore.Globalize.format(this.currentItem.end, '');
        this.inputCountry.value = this.currentItem.country;
        this.inputProduct.value = this.currentItem.product;
        this.inputColor.value = this.currentItem.color;
        this.inputAmount.value = wjcCore.Globalize.format(this.currentItem.amount, '');
        this.inputActive.value = this.currentItem.active;
    }

    render() {
        return <div>
            <h2>Editing</h2>
            <p>
                The CollectionView class, like the one in .NET, implements the IEditableCollectionView
                    interface to support editing.
                </p>
            <p>
                This sample shows how you can update, add, and remove items in a collection.
                </p>
            <p>
                In the grid, select a row and press the <b>Edit Detail</b> button below to start
                    editing. When you finish editing in the popup dialog, press the <b>OK</b> button to
                    commit your updates. If you want to add a new record to the  collection, press
                    the <b>Add</b> button and enter content for the item in the popup dialog. Press OK to
                    commit the new record. Select a row and press the <b>Delete</b> button to remove a
                    record from the collection.
                </p>
            <div className="row">
                <div className="col-md-6">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#edJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#edJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="edJsx">
                            {'<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.cvEditing.items.map((item, idx1) => {\n'}
                            {'                return <tr key={idx1} onClick={this.moveCurrentTo.bind(this, item)}\n'}
                            {'                    className={item == this.state.currentItem ? "success" : ""}>\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'}
                            {'\n'}
                            {'<div className="row-fluid well">\n'}
                            {'\n'}
                            {'    <button className="btn btn-default" data-toggle="modal" data-target="#dlgDetail"\n'}
                            {'        onClick={this.editItem.bind(this)}\n'}
                            {'        disabled={!this.currentItem}>\n'}
                            {'        Edit Detail...\n'}
                            {'    </button>\n'}
                            {'    <button className="btn btn-default" data-toggle="modal" data-target="#dlgDetail"\n'}
                            {'        onClick={this.addNew.bind(this)}>\n'}
                            {'        Add...\n'}
                            {'     </button>\n'}
                            {'    <button className="btn btn-default"\n'}
                            {'        onClick={this.remove.bind(this)}\n'}
                            {'        disabled={!this.currentItem}>\n'}
                            {'        Delete\n'}
                            {'    </button>\n'}
                            {'</div>\n'}
                            {'\n'}
                            {'<div className="modal fade" id="dlgDetail" style={{ display: this.currentItem ? "none" : "" }}>\n'}
                            {'    <div className="modal-dialog">\n'}
                            {'        <div className="modal-content">\n'}
                            {'            <div className="modal-header">\n'}
                            {'                <button type="button" className="close" data-dismiss="modal" aria-hidden="true">\n'}
                            {'                    &times;\n'}
                            {'         </button>\n'}
                            {'                <h4 className="modal-title">Edit Item</h4>\n'}
                            {'            </div>\n'}
                            {'            <div className="modal-body">\n'}
                            {'                <dl className="dl-horizontal">\n'}
                            {'                    <dt>ID</dt>\n'}
                            {'                    <dd>\n'}
                            {'                        <input className="form-control" type="text" defaultValue={this.currentItem.id} ref={(input) => this.inputId = input} />\n'}
                            {'                    </dd>\n'}
                            {'                    <dt>Start Date</dt>\n'}
                            {'                    <dd>\n'}
                            {'                        <input className="form-control" type="text" defaultValue={this.state.start} ref={(input) => this.inputStart = input} />\n'}
                            {'                    </dd>\n'}
                            {'                    <dt>End Start</dt>\n'}
                            {'                    <dd>\n'}
                            {'                        <input className="form-control" type="text" defaultValue={this.state.end} ref={(input) => this.inputEnd = input} />\n'}
                            {'                    </dd>\n'}
                            {'                    <dt>Country</dt>\n'}
                            {'                    <dd>\n'}
                            {'                        <input className="form-control" type="text" defaultValue={this.state.country} ref={(input) => this.inputCountry = input} />\n'}
                            {'                    </dd>\n'}
                            {'                    <dt>Product</dt>\n'}
                            {'                    <dd>\n'}
                            {'                        <input className="form-control" type="text" defaultValue={this.state.product} ref={(input) => this.inputProduct = input} />\n'}
                            {'                    </dd>\n'}
                            {'                    <dt>Color</dt>\n'}
                            {'                    <dd>\n'}
                            {'                        <input className="form-control" type="text" defaultValue={this.state.color} ref={(input) => this.inputColor = input} />\n'}
                            {'                    </dd>\n'}
                            {'                    <dt>Amount</dt\n'}
                            {'                    <dd>\n'}
                            {'                        <input className="form-control" type="text" defaultValue={this.state.amount} ref={(input) => this.inputAmount = input} />\n'}
                            {'                    </dd>\n'}
                            {'                    <dt>Active</dt\n'}
                            {'                    <dd>\n'}
                            {'                        <input className="form-control" type="checkbox" defaultValue={this.state.active} ref={(input) => this.inputActive = input} />\n'}
                            {'                    </dd>\n'}
                            {'                </dl>\n'}
                            {'            </div>\n'}
                            {'            <div className="modal-footer">\n'}
                            {'                <button type="button" className="btn btn-primary" data-dismiss="modal" onClick={this.confirmUpdate.bind(this)}>\n'}
                            {'                    OK\n'}
                            {'         </button>\n'}
                            {'                <button type="button" className="btn btn-warning" data-dismiss="modal" onClick={this.cancelUpdate.bind(this)}>\n'}
                            {'                    Cancel\n'}
                            {'         </button>\n'}
                            {'            </div>\n'}
                            {'        </div>\n'}
                            {'    </div>\n'}
                            {'</div>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="edJs">
                            {' fieldNames = DataSvc.default.getNames();\n'}
                            {' cvEditing = new wjcCore.CollectionView(DataSvc.default.getData(10));\n'}
                            {' currentItem: any;\n'}
                            {' inputId: HTMLInputElement;\n'}
                            {' inputStart: HTMLInputElement;\n'}
                            {' inputEnd: HTMLInputElement;\n'}
                            {' inputCountry: HTMLInputElement;\n'}
                            {' inputProduct: HTMLInputElement;\n'}
                            {' inputColor: HTMLInputElement;\n'}
                            {' inputAmount: HTMLInputElement;\n'}
                            {' inputActive: HTMLInputElement;\n'}
                            {'\n'}
                            {' constructor(props) {\n'}
                            {'     super(props);\n'}
                            {'     this.currentItem = this.cvEditing.currentItem;\n'}
                            {'     this.state = {\n'}
                            {'         currentItem: this.currentItem,\n'}
                            {'         id: this.currentItem.id,\n'}
                            {'         start: wjcCore.Globalize.format(this.currentItem.start, \'\'),\n'}
                            {'         end: wjcCore.Globalize.format(this.currentItem.end, \'\'),\n'}
                            {'         country: this.currentItem.country,\n'}
                            {'         product: this.currentItem.product,\n'}
                            {'         color: this.currentItem.color,\n'}
                            {'         amount: wjcCore.Globalize.format(this.currentItem.amount, \'\'),\n'}
                            {'         active: this.currentItem.active\n'}
                            {'     }\n'}
                            {'     // define the new item value.\n'}
                            {'     this.cvEditing.newItemCreator = () => {\n'}
                            {'         var item = DataSvc.default.getData(1)[0];\n'}
                            {'\n'}
                            {'         // aggregate the max value of id in the collection.\n'}
                            {'         item.id = wjcCore.getAggregate(wjcCore.Aggregate.Max, this.cvEditing.sourceCollection, \'id\') + 1;\n'}
                            {'         this.setState({currentItem: item });\n'}
                            {'         return item;\n'}
                            {'     }\n'}
                            {'     // syn the scope currentItem with the collectionview.\n'}
                            {'     this.cvEditing.currentChanged.addHandler(() => {\n'}
                            {'         this.currentItem = this.cvEditing.currentItem;\n'}
                            {'          this.setState({currentItem: this.currentItem });\n'}
                            {'          this.updateItemDetail();\n'}
                            {'     });\n'}
                            {' }\n'}
                            {'\n'}
                            {' moveCurrentTo(item) {\n'}
                            {'     this.cvEditing.moveCurrentTo(item);\n'}
                            {'     this.setState({ currentItem: item });\n'}
                            {' }\n'}
                            {'\n'}
                            {' editItem() {\n'}
                            {'     this.cvEditing.editItem(this.currentItem);\n'}
                            {' }\n'}
                            {'\n'}
                            {' addNew() {\n'}
                            {'     this.cvEditing.addNew();\n'}
                            {' }\n'}
                            {'\n'}
                            {' remove() {\n'}
                            {'     this.cvEditing.remove(this.currentItem);\n'}
                            {'     this.forceUpdate();\n'}
                            {' }\n'}
                            {'\n'}
                            {' // editing\n'}
                            {' confirmUpdate() {\n'}
                            {'     // commit editing/adding\n'}
                            {'     this.cvEditing.currentItem.id = this.inputId.value;\n'}
                            {'     var updatedItem = this.getUpdatedData(),\n'}
                            {'         names = this.fieldNames;\n'}
                            {'\n'}
                            {'     // update the item\'s values\n'}
                            {'     for (var i = 0; i < names.length; i++) {\n'}
                            {'         var fName = names[i];\n'}
                            {'         this.cvEditing.currentItem[fName] = updatedItem[fName];\n'}
                            {'     }\n'}
                            {'     this.cvEditing.commitEdit();\n'}
                            {'     this.cvEditing.commitNew();\n'}
                            {'     this.forceUpdate();\n'}
                            {' };\n'}
                            {' cancelUpdate() {\n'}
                            {'     // cancel editing or adding\n'}
                            {'     this.cvEditing.cancelEdit();\n'}
                            {'     this.cvEditing.cancelNew();\n'}
                            {'        this.setState({currentItem: this.currentItem });\n'}
                            {'        this.updateItemDetail();\n'}
                            {' };\n'}
                            {'\n'}
                            {' // get edited content from the dialog\n'}
                            {' private getUpdatedData() {\n'}
                            {'     var item,\n'}
                            {'         content = this.inputId.value;\n'}
                            {'     item = {};\n'}
                            {'     if (content) {\n'}
                            {'         item.id = wjcCore.Globalize.parseInt(content);\n'}
                            {'     }\n'}
                            {'     content = this.inputStart.value;\n'}
                            {'     if (content) {\n'}
                            {'         item.start = wjcCore.Globalize.parseDate(content, \'\');\n'}
                            {'     }\n'}
                            {'     content = this.inputEnd.value;\n'}
                            {'     if (content) {\n'}
                            {'         item.end = wjcCore.Globalize.parseDate(content, \'\');\n'}
                            {'     }\n'}
                            {'     item.country = this.inputCountry.value;\n'}
                            {'     item.product = this.inputProduct.value;\n'}
                            {'     item.color = this.inputColor.value;\n'}
                            {'     content = this.inputAmount.value;\n'}
                            {'     if (content) {\n'}
                            {'         item.amount = wjcCore.Globalize.parseFloat(content);\n'}
                            {'     }\n'}
                            {'     item.active = this.inputActive.checked;\n'}
                            {'     return item;\n'}
                            {' }\n'}
                            {' \n'}
                            {' private updateItemDetail() {\n'}
                            {'     this.inputId.value = this.currentItem.id;\n'}
                            {'     this.inputStart.value = wjcCore.Globalize.format(this.currentItem.start, \'\');\n'}
                            {'     this.inputEnd.value = wjcCore.Globalize.format(this.currentItem.end, \'\');\n'}
                            {'     this.inputCountry.value = this.currentItem.country;\n'}
                            {'     this.inputProduct.value = this.currentItem.product;\n'}
                            {'     this.inputColor.value = this.currentItem.color;\n'}
                            {'     this.inputAmount.value = wjcCore.Globalize.format(this.currentItem.amount, \'\');\n'}
                            {'     this.inputActive.value = this.currentItem.active;\n'}
                            {'    }\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-6">
                    <h4>Result (live):</h4>
                    <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.cvEditing.items.map((item, idx1) => {
                                    return <tr key={idx1} onClick={this.moveCurrentTo.bind(this, item)}
                                        className={item == this.state.currentItem ? "success" : ""}>
                                        {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 className="row-fluid well">

                        <button className="btn btn-default" data-toggle="modal" data-target="#dlgDetail"
                            onClick={this.editItem.bind(this)}
                            disabled={!this.currentItem}>
                            Edit Detail...
                        </button>
                        <button className="btn btn-default" data-toggle="modal" data-target="#dlgDetail"
                            onClick={this.addNew.bind(this)}>
                            Add...
                        </button>
                        <button className="btn btn-default"
                            onClick={this.remove.bind(this)}
                            disabled={!this.currentItem}>
                            Delete
                        </button>
                    </div>

                    <div className="modal fade" id="dlgDetail" style={{ display: this.currentItem ? "none" : "" }}>
                        <div className="modal-dialog">
                            <div className="modal-content">
                                <div className="modal-header">
                                    <button type="button" className="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                     </button>
                                    <h4 className="modal-title">Edit Item</h4>
                                </div>
                                <div className="modal-body">
                                    <dl className="dl-horizontal">
                                        <dt>ID</dt>
                                        <dd>
                                            <input className="form-control" type="text" defaultValue={this.currentItem.id} ref={(input) => this.inputId = input} />
                                        </dd>
                                        <dt>Start Date</dt>
                                        <dd>
                                            <input className="form-control" type="text" defaultValue={this.state.start} ref={(input) => this.inputStart = input} />
                                        </dd>
                                        <dt>End Start</dt>
                                        <dd>
                                            <input className="form-control" type="text" defaultValue={this.state.end} ref={(input) => this.inputEnd = input} />
                                        </dd>
                                        <dt>Country</dt>
                                        <dd>
                                            <input className="form-control" type="text" defaultValue={this.state.country} ref={(input) => this.inputCountry = input} />
                                        </dd>
                                        <dt>Product</dt>
                                        <dd>
                                            <input className="form-control" type="text" defaultValue={this.state.product} ref={(input) => this.inputProduct = input} />
                                        </dd>
                                        <dt>Color</dt>
                                        <dd>
                                            <input className="form-control" type="text" defaultValue={this.state.color} ref={(input) => this.inputColor = input} />
                                        </dd>
                                        <dt>Amount</dt>
                                        <dd>
                                            <input className="form-control" type="text" defaultValue={this.state.amount} ref={(input) => this.inputAmount = input} />
                                        </dd>
                                        <dt>Active</dt>
                                        <dd>
                                            <input className="form-control" type="checkbox" defaultValue={this.state.active} ref={(input) => this.inputActive = input} />
                                        </dd>
                                    </dl>
                                </div>
                                <div className="modal-footer">
                                    <button type="button" className="btn btn-primary" data-dismiss="modal" onClick={this.confirmUpdate.bind(this)}>
                                        OK
                                     </button>
                                    <button type="button" className="btn btn-warning" data-dismiss="modal" onClick={this.cancelUpdate.bind(this)}>
                                        Cancel
                                     </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div >
            </div >
        </div >;

    }
}

