//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 Excel extends React.Component<any, any> {
    data = DataService.default.data;
    excelIOSheet: wjcGridSheet.FlexSheet;
    loadFile = null;
    constructor(props) {
        super(props);
        this.state = {
            saveFile: ''
        }
    }

    customFuncSheetInit(excelIOSheet: wjcGridSheet.FlexSheet) {
        let sheet1 = new wjcGridSheet.Sheet(excelIOSheet, null, 'Country', null, null),
            sheet2 = new wjcGridSheet.Sheet(excelIOSheet, null, 'Unbound', 20, 8);
        excelIOSheet.sheets.push(sheet1);
        excelIOSheet.sheets.push(sheet2);
        this.excelIOSheet = excelIOSheet;

        if (excelIOSheet) {
            excelIOSheet.deferUpdate(() => {
                let sheetIdx,
                    sheetName,
                    colIdx,
                    rowIdx;

                // initialize the dataMap for the bound sheet.
                if (excelIOSheet) {
                    for (sheetIdx = 0; sheetIdx < excelIOSheet.sheets.length; sheetIdx++) {
                        excelIOSheet.selectedSheetIndex = sheetIdx;
                        sheetName = excelIOSheet.selectedSheet.name;
                        if (sheetName === 'Country') {
                            excelIOSheet.selectedSheet.itemsSource = this.data;
                            DataService.default.initDataMapForBindingSheet(excelIOSheet);
                        } else {
                            for (colIdx = 0; colIdx < excelIOSheet.columns.length; colIdx++) {
                                for (rowIdx = 0; rowIdx < excelIOSheet.rows.length; rowIdx++) {
                                    excelIOSheet.setCellData(rowIdx, colIdx, colIdx + rowIdx);
                                }
                            }
                        }
                    }
                    excelIOSheet.selectedSheetIndex = 0;
                }
            });
        }
    }

    handleSaveFile(event) {
        this.setState({ saveFile: event.target.value });
    }

    handleLoadFile(event) {
        this.loadFile = event.target.files[0];
    }

    // Load xlsx file to FlexSheet.
    load() {
        let flexSheet = this.excelIOSheet;
        
        if (flexSheet && this.loadFile) {
            flexSheet.load(this.loadFile);
        }
    }

    // Save FlexSheet to xlsx file.
    save() {
        let flexSheet = this.excelIOSheet,
            fileName = this.state.saveFile;
        if (flexSheet) {
            if (fileName === '') {
                fileName = 'FlexSheet.xlsx';
            }
            flexSheet.save(fileName);
        }
    }

    render() {
        return <div>
            <h2 id="customFunction">
                Custom Function
            </h2>
            <p>
                Although the functions provided in FlexSheet should cover a vast majority of use scenarios, still there may be some cases where users may need additional functions.
            </p>
            <p>
                FlexSheet provides two methods that allow you to add your own custom functions: <b>addFunction</b> and <b>unknownFunction</b>.
            </p>
            <p>
                The <b>addFunction</b> method adds a custom function to the list of built-in functions.
            </p>
            <p>
                The addFunction method is usually the best way to add custom functions to the FlexSheet calculation engine. However, there are scenarios where the function names are variable or unknown ahead of time. For example, named ranges or value dictionaries.
            </p>
            <p>
                In these situations, you can use the <b>unknownFunction</b> event to look up the value of a function dynamically. When the FlexSheet detects an unknown function name, it raises the unknownFunction event and provides parameters that contain the function name and parameters. The event handler then calculates the result and returns the value.
            </p>

            <div className="row">
                <div className="col-md-5">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#exJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#exJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="exJsx">
                            {'  <wjGridSheet.FlexSheet\n'}
                            {'      initialized={this.customFuncSheetInit.bind(this)} />\n'}
                            {'  <div className="form-inline well well-lg">\n'}
                            {'      <input type="file" className="form-control" id="importFile" value={this.state.loadFile} onChange={this.handleLoadFile.bind(this)}\n'}
                            {'          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />\n'}
                            {'      <button className="btn btn-default" onClick={this.load.bind(this)}>Load</button>\n'}
                            {'  </div>\n'}
                            {'  <div className="form-inline well well-lg">\n'}
                            {'      File Name:\n'}
                            {'   <input type="text" className="form-control" id="saveFile"  onChange={this.handleSaveFile.bind(this)} />\n'}
                            {'      <button className="btn btn-default" onClick={this.save.bind(this)}>Save</button>\n'}
                            {'  </div>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="exJs">
                            {'  data = DataService.default.data;\n'}
                            {'  excelIOSheet: wjcGridSheet.FlexSheet;\n'}
                            {'  loadFile = null;\n'}
                            {'  constructor(props) {\n'}
                            {'      super(props);\n'}
                            {'      this.state = {\n'}
                            {'          saveFile: \'\'\n'}
                            {'      }\n'}
                            {'  }\n'}
                            {' \n'}
                            {'  customFuncSheetInit(excelIOSheet: wjcGridSheet.FlexSheet) {\n'}
                            {'      let sheet1 = new wjcGridSheet.Sheet(excelIOSheet, null, \'Country\', null, null),\n'}
                            {'          sheet2 = new wjcGridSheet.Sheet(excelIOSheet, null, \'Unbound\', 20, 8);\n'}
                            {'      excelIOSheet.sheets.push(sheet1);\n'}
                            {'      excelIOSheet.sheets.push(sheet2);\n'}
                            {'      this.excelIOSheet = excelIOSheet;\n'}
                            {' \n'}
                            {'      if (excelIOSheet) {\n'}
                            {'          excelIOSheet.deferUpdate(() => {\n'}
                            {'              let sheetIdx,\n'}
                            {'                  sheetName,\n'}
                            {'                  colIdx,\n'}
                            {'                  rowIdx;\n'}
                            {' \n'}
                            {'              // initialize the dataMap for the bound sheet.\n'}
                            {'              if (excelIOSheet) {\n'}
                            {'                  for (sheetIdx = 0; sheetIdx < excelIOSheet.sheets.length; sheetIdx++) {\n'}
                            {'                      excelIOSheet.selectedSheetIndex = sheetIdx;\n'}
                            {'                      sheetName = excelIOSheet.selectedSheet.name;\n'}
                            {'                      if (sheetName === \'Country\') {\n'}
                            {'                          excelIOSheet.selectedSheet.itemsSource = this.data;\n'}
                            {'                          DataService.default.initDataMapForBindingSheet(excelIOSheet);\n'}
                            {'                      } else {\n'}
                            {'                          for (colIdx = 0; colIdx < excelIOSheet.columns.length; colIdx++) {\n'}
                            {'                              for (rowIdx = 0; rowIdx < excelIOSheet.rows.length; rowIdx++) {\n'}
                            {'                                  excelIOSheet.setCellData(rowIdx, colIdx, colIdx + rowIdx);\n'}
                            {'                              }\n'}
                            {'                          }\n'}
                            {'                      }\n'}
                            {'                  }\n'}
                            {'                  excelIOSheet.selectedSheetIndex = 0;\n'}
                            {'              }\n'}
                            {'          });\n'}
                            {'      }\n'}
                            {'  }\n'}
                            {' \n'}
                            {'  handleSaveFile(event) {\n'}
                            {'      this.setState({ saveFile: event.target.value });\n'}
                            {'  }\n'}
                            {' \n'}
                            {'  handleLoadFile(event) {\n'}
                            {'      this.loadFile = event.target.files[0];\n'}
                            {'  }\n'}
                            {' \n'}
                            {'  // Load xlsx file to FlexSheet.\n'}
                            {'  load() {\n'}
                            {'      let flexSheet = this.excelIOSheet;\n'}
                            {'      \n'}
                            {'      if (flexSheet && this.loadFile) {\n'}
                            {'          flexSheet.load(this.loadFile);\n'}
                            {'      }\n'}
                            {'  }\n'}
                            {' \n'}
                            {'  // Save FlexSheet to xlsx file.\n'}
                            {'  save() {\n'}
                            {'      let flexSheet = this.excelIOSheet,\n'}
                            {'          fileName = this.state.saveFile;\n'}
                            {'      if (flexSheet) {\n'}
                            {'          if (fileName === \'\') {\n'}
                            {'              fileName = \'FlexSheet.xlsx\';\n'}
                            {'          }\n'}
                            {'          flexSheet.save(fileName);\n'}
                            {'      }\n'}
                            {'  }\n'}
                            {' \n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-7">
                    <h4>Result (live):</h4>
                    <wjGridSheet.FlexSheet
                        initialized={this.customFuncSheetInit.bind(this)} />
                    <div className="form-inline well well-lg">
                        <input type="file" className="form-control" id="importFile" value={this.state.loadFile} onChange={this.handleLoadFile.bind(this)}
                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
                        <button className="btn btn-default" onClick={this.load.bind(this)}>Load</button>
                    </div>
                    <div className="form-inline well well-lg">
                        File Name:
                     <input type="text" className="form-control" id="saveFile"  onChange={this.handleSaveFile.bind(this)} />
                        <button className="btn btn-default" onClick={this.save.bind(this)}>Save</button>
                    </div>
                </div>
            </div>
        </div>;
    }
}

