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

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

    constructor(props) {
        super(props);
        this.state = {
            layoutDefinition: this.layoutDefs,
            allowAddNew: true,
            allowDelete:true
        }
    }

    allowAddOrDeleteChanged(event) {
        var target = event.target,
            value = target.type === 'checkbox' ? target.checked : target.value,
            name = target.name;

        this.setState({
            [name]: value
        });
    }

    render() {
        return <div>
            <h2>
                Adding and Deleting Records
        </h2>
            <p>
                The <b>MultiRow</b> control supports the <b>allowAddNew</b> and <b>allowDelete</b>
                properties provided by the <b>FlexGrid</b> control.
        </p>
            <p>
                Setting the <b>allowAddNew</b> property to true causes the grid to display a set of
            'new row template' rows at the bottom of the grid.
            When user starts editing a cell in the new row template, a new item is added
            to the source collection. When user finishes editing the new item by moving
            the selection to another row or the focus to another control, the new item is
            committed.
        </p>
            <p>
                Setting the <b>allowDelete</b> property to true causes the grid to monitor key presses
            and to delete the current row if user presses the 'Delete' key while an entire
            row is selected.
        </p>

            <div className="row">
                <div className="col-md-5">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#adrJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#adrJs" role="tab" data-toggle="tab">TS</a></li>
                        <li><a href="#adrCss" role="tab" data-toggle="tab">CSS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="adrJsx">
                            {'<wjMultiRow.MultiRow\n'}
                            {'    itemsSource={this.orders}\n'}
                            {'    layoutDefinition={this.state.layoutDefinition}\n'}
                            {'    allowAddNew={this.state.allowAddNew}\n'}
                            {'    allowDelete={this.state.allowDelete}>\n'}
                            {'</wjMultiRow.MultiRow>\n'}
                            {'<label>\n'}
                            {'    <input type="checkbox" name="allowAddNew" checked={this.state.allowAddNew}\n'}
                            {'        onChange={this.allowAddOrDeleteChanged.bind(this)}/>\n'}
                            {'    Allow Add New\n'}
                            {'</label>\n'}
                            {'<br />\n'}
                            {'<label>\n'}
                            {'   <input type="checkbox" name="allowDelete" checked={this.state.allowDelete}\n'}
                            {'          onChange={this.allowAddOrDeleteChanged.bind(this)}/>\n'}
                            {'    Allow Delete\n'}
                            {'</label>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="adrJs">
                            {' constructor(props) {\n'}
                            {'     super(props);\n'}
                            {'     this.state = {\n'}
                            {'         layoutDefinition: this.layoutDefs,\n'}
                            {'         allowAddNew: true,\n'}
                            {'         allowDelete:true\n'}
                            {'     }\n'}
                            {' }\n'}
                           {'\n'}
                           {' allowAddOrDeleteChanged(event) {\n'}
                           {'     var target = event.target,\n'}
                           {'         value = target.type === \'checkbox\' ? target.checked : target.value,\n'}
                           {'         name = target.name;\n'}
                           {'\n'}
                           {'     this.setState({\n'}
                           {'       [name]: value\n'}
                           {'     });\n'}
                           {' }\n'}
                        </div>
                        <div className="tab-pane pane-content" id="adrCss">
                            {'/* custom styling for new row templates */\n'}
                            {'.wj-cell.wj-new:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {\n'}
                            {'    background-color: #f3fbcc;\n'}
                            {'}\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-7">
                    <h4>Result (live):</h4>
                    <wjMultiRow.MultiRow
                        itemsSource={this.orders}
                        layoutDefinition={this.state.layoutDefinition}
                        allowAddNew={this.state.allowAddNew}
                        allowDelete={this.state.allowDelete}>
                    </wjMultiRow.MultiRow>
                    <label>
                        <input type="checkbox" name="allowAddNew" checked={this.state.allowAddNew}
                            onChange={this.allowAddOrDeleteChanged.bind(this)}/>
                    Allow Add New
                </label>
                    <br />
                    <label>
                            <input type="checkbox" name="allowDelete" checked={this.state.allowDelete}
                                onChange={this.allowAddOrDeleteChanged.bind(this)}/>
                    Allow Delete
                </label>
                </div>
            </div>
        </div>;
    }
}

