//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 CellFreezing extends React.Component<any, any> {
    orders = DataService.default.orders;
    layoutDefs = DataService.default.ldTwoLines;
    multiRow = null;

    constructor(props) {
        super(props);
        this.state = {
            layoutDefinition: this.layoutDefs,
            freeStr: 'Freeze'
        }
    }

    initialized(s) {
        this.multiRow = s;
    }

    // toggle frozen rows/columns
    toggleFreeze(rows: number, cols: number) {
        var flex = this.multiRow;
        if (flex) {
            flex.frozenColumns = flex.frozenColumns ? 0 : cols;
            flex.frozenRows = flex.frozenRows ? 0 : rows;
        }
        this.setState({
            freeStr: flex.frozenRows == 0 ? 'Freeze' : 'Unfreeze'
        });
    }

    render() {
        return <div>
            <h2>
                Cell Freezing
        </h2>
            <p>
                The <b>MultiRow</b> control allows you to freeze rows and columns so they remain
            in view as the user scrolls the grid. Frozen cells can be edited and selected as
            regular cells, exactly as in Excel and in the <b>FlexGrid</b> control.
        </p>
            <p>
                This example allows you to toggle whether the first group of rows and columns should be
            frozen.
        </p>

            <div className="row">
                <div className="col-md-5">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#cfJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#cfJs" role="tab" data-toggle="tab">TS</a></li>
                        <li><a href="#cfCss" role="tab" data-toggle="tab">CSS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="cfJsx">
                            {'<wjMultiRow.MultiRow\n'}
                            {'    initialized={this.initialized.bind(this)}\n'}
                            {'    itemsSource={this.orders}\n'}
                            {'    layoutDefinition={this.state.layoutDefinition}>\n'}
                            {'</wjMultiRow.MultiRow>\n'}
                            {'<button className="btn btn-default"\n'}
                            {'    onClick={this.toggleFreeze.bind(this, 2, 2)}>\n'}
                            {'    {this.state.freeStr}\n'}
                            {'</button>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="cfJs">
                            {'multiRow = null;\n'}
                            {'\n'}
                            {'initialized(s) {\n'}
                            {'    this.multiRow = s;\n'}
                            {'}\n'}
                            {'\n'}
                            {'// toggle frozen rows/columns\n'}
                            {'toggleFreeze(rows: number, cols: number) {\n'}
                            {'    var flex = this.multiRow;\n'}
                            {'    if (flex) {\n'}
                            {'        flex.frozenColumns = flex.frozenColumns ? 0 : cols;\n'}
                            {'        flex.frozenRows = flex.frozenRows ? 0 : rows;\n'}
                            {'    }\n'}
                            {'    this.setState({\n'}
                            {'        freeStr: flex.frozenRows == 0 ? \'Freeze\' : \'Unfreeze\'\n'}
                            {'    });\n'}
                            {'}\n'}
                        </div>
                        <div className="tab-pane pane-content" id="cfCss">
                            {'/* custom styling for frozen cells */\n'}
                            {'.wj-cell.wj-frozen: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
                        initialized={this.initialized.bind(this)}
                        itemsSource={this.orders}
                        layoutDefinition={this.state.layoutDefinition}>
                    </wjMultiRow.MultiRow>
                    <button className="btn btn-default"
                        onClick={this.toggleFreeze.bind(this, 2, 2)}>
                        {this.state.freeStr}
                    </button>
                </div>
            </div>
        </div>;
    }
}

