//React
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//Wijmo
import * as wjcCore from 'wijmo/wijmo';
import * as wjGridSheet from 'wijmo/wijmo.react.grid.sheet';
import * as wjcGridSheet from 'wijmo/wijmo.grid.sheet';
import * as wjcGrid from 'wijmo/wijmo.grid';
//Application
import { DataService } from '../services/DataSvc';

export class FrozenCells extends React.Component<any, any> {
    frozenSheet: wjcGridSheet.FlexSheet;

    constructor(props) {
        super(props);
        this.state = {
            frozenState: 'Freeze'
        }
    }

    frozenCellSheetInit(frozenSheet: wjcGridSheet.FlexSheet) {
        let sheet1 = new wjcGridSheet.Sheet(frozenSheet, null, 'Unbound', 20, 8);
        this.frozenSheet = frozenSheet;
        frozenSheet.sheets.push(sheet1);
        if (frozenSheet) {
            frozenSheet.deferUpdate(() => {
                let colIdx,
                    rowIdx;

                for (colIdx = 0; colIdx < frozenSheet.columns.length; colIdx++) {
                    for (rowIdx = 0; rowIdx < frozenSheet.rows.length; rowIdx++) {
                        frozenSheet.setCellData(rowIdx, colIdx, colIdx + rowIdx);
                    }
                }
            });
            frozenSheet.selectedSheetChanged.addHandler(() => {
                this._updateFrozenState();
            });
        }
    }

    freezeCells() {
        if (this.frozenSheet) {
            this.frozenSheet.freezeAtCursor();

            this._updateFrozenState();
        }
    }

    private _updateFrozenState() {
        if (this.frozenSheet.frozenColumns > 0 || this.frozenSheet.frozenRows > 0) {
            this.setState({
                frozenState: 'UnFreeze'
            });
        } else {
            this.setState({
                frozenState: 'Freeze'
            });
        }
    }

    render() {
        return <div>
             <h2 id="frozenCells">
                 Frozen Cells
             </h2>
             <p>
                 FlexSheet allows you to freeze the rows and columns of the selected cell by the <b>freezeAtCursor</b> method.
             </p>

            <div className="row">
                <div className="col-md-5">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#fclJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#fclJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="fclJsx">
                            {' <wjGridSheet.FlexSheet\n'}
                            {'     initialized={this.frozenCellSheetInit.bind(this)} />\n'}
                            {' <button type="button" className="btn btn-default" onClick={this.freezeCells.bind(this)}>{this.state.frozenState}</button>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="fclJs">
                            {' frozenSheet: wjcGridSheet.FlexSheet;\n'}
                            {'\n'}
                            {' constructor(props) {\n'}
                            {'     super(props);\n'}
                            {'     this.state = {\n'}
                            {'         frozenState: \'Freeze\'\n'}
                            {'     }\n'}
                            {' }\n'}
                            {'\n'}
                            {' frozenCellSheetInit(frozenSheet: wjcGridSheet.FlexSheet) {\n'}
                            {'     let sheet1 = new wjcGridSheet.Sheet(frozenSheet, null, \'Unbound\', 20, 8);\n'}
                            {'     this.frozenSheet = frozenSheet;\n'}
                            {'     frozenSheet.sheets.push(sheet1);\n'}
                            {'     if (frozenSheet) {\n'}
                            {'         frozenSheet.deferUpdate(() => {\n'}
                            {'             let colIdx,\n'}
                            {'                 rowIdx;\n'}
                            {'\n'}
                            {'             for (colIdx = 0; colIdx < frozenSheet.columns.length; colIdx++) {\n'}
                            {'                 for (rowIdx = 0; rowIdx < frozenSheet.rows.length; rowIdx++) {\n'}
                            {'                     frozenSheet.setCellData(rowIdx, colIdx, colIdx + rowIdx);\n'}
                            {'                 }\n'}
                            {'             }\n'}
                            {'         });\n'}
                            {'         frozenSheet.selectedSheetChanged.addHandler(() => {\n'}
                            {'             this._updateFrozenState();\n'}
                            {'         });\n'}
                            {'     }\n'}
                            {' }\n'}
                            {'\n'}
                            {' freezeCells() {\n'}
                            {'     if (this.frozenSheet) {\n'}
                            {'         this.frozenSheet.freezeAtCursor();\n'}
                            {'\n'}
                            {'         this._updateFrozenState();\n'}
                            {'     }\n'}
                            {' }\n'}
                            {'\n'}
                            {' private _updateFrozenState() {\n'}
                            {'     if (this.frozenSheet.frozenColumns > 0 || this.frozenSheet.frozenRows > 0) {\n'}
                            {'         this.setState({\n'}
                            {'             frozenState: \'UnFreeze\'\n'}
                            {'         });\n'}
                            {'     } else {\n'}
                            {'         this.setState({\n'}
                            {'             frozenState: \'Freeze\'\n'}
                            {'         });\n'}
                            {'     }\n'}
                            {' }\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-7">
                    <h4>Result (live):</h4>
                    <wjGridSheet.FlexSheet
                        initialized={this.frozenCellSheetInit.bind(this)} />
                    <button type="button" className="btn btn-default" onClick={this.freezeCells.bind(this)}>{this.state.frozenState}</button>
                </div>
            </div>
        </div>;
    }
}

