//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 CellMerge extends React.Component<any, any> {
    mergeCellSheet: wjcGridSheet.FlexSheet;
    mergeState: wjcGridSheet.IFormatState;

    constructor(props) {
        super(props);
        this.state = {
            mergeStateStr: 'Merge'
        }
    }

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

                for (colIdx = 0; colIdx < mergeCellSheet.columns.length; colIdx++) {
                    for (rowIdx = 0; rowIdx < mergeCellSheet.rows.length; rowIdx++) {
                        mergeCellSheet.setCellData(rowIdx, colIdx, colIdx + rowIdx);
                    }
                }
            });
            mergeCellSheet.selectionChanged.addHandler(() => {
                this.mergeState = mergeCellSheet.getSelectionFormatState();
                this.setState({
                    mergeStateStr: this.mergeState.isMergedCell ? 'UnMerge' : 'Merge'
                });
            });
        }
    }

    mergeCells(s) {
        if (this.mergeCellSheet) {
            this.mergeCellSheet.mergeRange();
            this.mergeState = this.mergeCellSheet.getSelectionFormatState();
            this.setState({
                mergeStateStr: this.mergeState.isMergedCell ? 'UnMerge' : 'Merge'
            });
        }
    }

    render() {
        return <div>
          <h2 id="cellMerge">
              Cell Merging
          </h2>
          <p>
              FlexSheet supports merging the selected cells into one by invoking the <b>mergeRange</b> method.
          </p>
          <p>
              If the selected cells contain merged cell, the mergeRange method will un-merge the merged cell. Otherwise, it will merge the selected cells into one cell.
          </p>
          <p>
              FlexSheet allows merging of cells that contain any data. This is different from FlexGrid, which supports content-driven cell merging.
          </p>

            <div className="row">
                <div className="col-md-5">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#mgJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#mgJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="mgJsx">
                            {'  <wjGridSheet.FlexSheet\n'}
                            {'      initialized={this.mergeCellSheetInit.bind(this)} />\n'}
                            {'  <button type="button" className="btn btn-default" onClick={this.mergeCells.bind(this)}>{this.state.mergeStateStr}</button>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="mgJs">
                            {'   mergeCellSheet: wjcGridSheet.FlexSheet;\n'}
                            {'   mergeState: wjcGridSheet.IFormatState\n'}
                            {'\n'}
                            {'   constructor(props) {\n'}
                            {'       super(props);\n'}
                            {'       this.state = {\n'}
                            {'           mergeStateStr: \'Merge\'\n'}
                            {'       }\n'}
                            {'   }\n'}
                            {'\n'}
                            {'   mergeCellSheetInit(mergeCellSheet: wjcGridSheet.FlexSheet) {\n'}
                            {'       let sheet1 = new wjcGridSheet.Sheet(mergeCellSheet, null, \'Unbound\', 20, 8);\n'}
                            {'       this.mergeCellSheet = mergeCellSheet;\n'}
                            {'       mergeCellSheet.sheets.push(sheet1);\n'}
                            {'       if (mergeCellSheet) {\n'}
                            {'           mergeCellSheet.deferUpdate(() => {\n'}
                            {'               let colIdx,\n'}
                            {'                   rowIdx;\n'}
                            {'\n'}
                            {'               for (colIdx = 0; colIdx < mergeCellSheet.columns.length; colIdx++) {\n'}
                            {'                   for (rowIdx = 0; rowIdx < mergeCellSheet.rows.length; rowIdx++) {\n'}
                            {'                       mergeCellSheet.setCellData(rowIdx, colIdx, colIdx + rowIdx);\n'}
                            {'                   }\n'}
                            {'               }\n'}
                            {'           });\n'}
                            {'           mergeCellSheet.selectionChanged.addHandler(() => {\n'}
                            {'               this.mergeState = mergeCellSheet.getSelectionFormatState();\n'}
                            {'            this.setState({\n'}
                            {'                mergeStateStr: this.mergeState.isMergedCell ? \'UnMerge\' : \'Merge\'\n'}
                            {'            });\n'}
                            {'           });\n'}
                            {'       }\n'}
                            {'   }\n'}
                            {'\n'}
                            {'   mergeCells(s) {\n'}
                            {'       if (this.mergeCellSheet) {\n'}
                            {'           this.mergeCellSheet.mergeRange();\n'}
                            {'           this.mergeState = this.mergeCellSheet.getSelectionFormatState();\n'}
                            {'           this.setState({\n'}
                            {'               mergeStateStr: this.mergeState.isMergedCell ? \'UnMerge\' : \'Merge\'\n'}
                            {'           });\n'}
                            {'       }\n'}
                            {'   }\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-7">
                    <h4>Result (live):</h4>
                    <wjGridSheet.FlexSheet
                        initialized={this.mergeCellSheetInit.bind(this)} />
                    <button type="button" className="btn btn-default" onClick={this.mergeCells.bind(this)}>{this.state.mergeStateStr}</button>
                </div>
            </div>
        </div>;
    }
}

