"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
//React
var React = require("react");
var wjGridSheet = require("wijmo/wijmo.react.grid.sheet");
var wjcGridSheet = require("wijmo/wijmo.grid.sheet");
var wjcGrid = require("wijmo/wijmo.grid");
var Formulas = /** @class */ (function (_super) {
    __extends(Formulas, _super);
    function Formulas(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            currentCellData: ''
        };
        return _this;
    }
    Formulas.prototype.formulaSheetInit = function (formulaSheet) {
        var _this = this;
        var sheet1 = new wjcGridSheet.Sheet(formulaSheet, null, 'Expence Report', 14, 6);
        this.formulaSheet = formulaSheet;
        formulaSheet.sheets.push(sheet1);
        if (formulaSheet) {
            formulaSheet.selectionChanged.addHandler(function (sender, args) {
                var selection = args.range;
                if (selection.isValid) {
                    _this.setState({
                        currentCellData: formulaSheet.getCellData(selection.row, selection.col, true)
                    });
                }
            });
            formulaSheet.deferUpdate(function () {
                _this._generateExpenceReport(formulaSheet);
            });
        }
    };
    // Set content for the use case template sheet.
    Formulas.prototype._generateExpenceReport = function (flexSheet) {
        flexSheet.setCellData(1, 1, 'Expense Report');
        flexSheet.setCellData(3, 1, 'Date');
        flexSheet.setCellData(3, 2, 'Fuel');
        flexSheet.setCellData(3, 3, 'Parking(per hour)');
        flexSheet.setCellData(3, 4, 'Parking(hours)');
        flexSheet.setCellData(3, 5, 'Total');
        ;
        flexSheet.setCellData(9, 1, 'Total');
        flexSheet.setCellData(10, 4, 'Subtotal');
        flexSheet.setCellData(11, 4, 'Cash Advances');
        flexSheet.setCellData(12, 4, 'Total');
        this._setExpenseData(flexSheet);
        this._applyStyleForExpenceReport(flexSheet);
    };
    // set expense detail data for the use case template sheet.
    Formulas.prototype._setExpenseData = function (flexSheet) {
        var rowIndex, colIndex, value;
        for (rowIndex = 4; rowIndex <= 8; rowIndex++) {
            for (colIndex = 2; colIndex <= 5; colIndex++) {
                if (colIndex === 5) {
                    flexSheet.setCellData(rowIndex, colIndex, '=C' + (rowIndex + 1) + ' + Product(C' + (rowIndex + 1) + ':D' + (rowIndex + 1) + ')');
                }
                else if (colIndex === 4) {
                    value = Math.ceil(7 * Math.random());
                    flexSheet.setCellData(rowIndex, colIndex, value);
                }
                else if (colIndex === 3) {
                    flexSheet.setCellData(rowIndex, colIndex, 3.75);
                }
                else {
                    value = 200 * Math.random();
                    flexSheet.setCellData(rowIndex, colIndex, value);
                }
            }
        }
        flexSheet.setCellData(4, 1, '2015-3-1');
        flexSheet.setCellData(5, 1, '2015-3-3');
        flexSheet.setCellData(6, 1, '2015-3-7');
        flexSheet.setCellData(7, 1, '2015-3-11');
        flexSheet.setCellData(8, 1, '2015-3-18');
        flexSheet.setCellData(9, 2, '=Sum(C5:C9)');
        flexSheet.setCellData(9, 4, '=Sum(Product(D5:E5), Product(D6:E6), Product(D7:E7), Product(D8:E8), Product(D9:E9))');
        flexSheet.setCellData(9, 5, '=Sum(F5:F9)');
        flexSheet.setCellData(10, 5, '=F13-F12');
        flexSheet.setCellData(11, 5, 800);
        flexSheet.setCellData(12, 5, '=F10');
    };
    // Apply styles for the use case template sheet.
    Formulas.prototype._applyStyleForExpenceReport = function (flexSheet) {
        flexSheet.columns[0].width = 10;
        flexSheet.columns[1].width = 90;
        flexSheet.columns[2].width = 80;
        flexSheet.columns[3].width = 140;
        flexSheet.columns[4].width = 120;
        flexSheet.columns[5].width = 80;
        for (var i = 2; i <= 3; i++) {
            flexSheet.columns[i].format = 'c2';
        }
        flexSheet.columns[5].format = 'c2';
        flexSheet.rows[1].height = 45;
        flexSheet.applyCellsStyle({
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#696964'
        }, [new wjcGrid.CellRange(1, 1, 1, 3)]);
        flexSheet.mergeRange(new wjcGrid.CellRange(1, 1, 1, 3));
        flexSheet.applyCellsStyle({
            fontWeight: 'bold',
            backgroundColor: '#FAD9CD',
        }, [new wjcGrid.CellRange(3, 1, 3, 5),
            new wjcGrid.CellRange(9, 1, 9, 5)]);
        flexSheet.applyCellsStyle({
            textAlign: 'center'
        }, [new wjcGrid.CellRange(3, 1, 3, 5)]);
        flexSheet.applyCellsStyle({
            format: 'c2'
        }, [new wjcGrid.CellRange(9, 4, 9, 4)]);
        flexSheet.applyCellsStyle({
            backgroundColor: '#F4B19B'
        }, [new wjcGrid.CellRange(4, 1, 8, 5)]);
        flexSheet.applyCellsStyle({
            fontWeight: 'bold',
            textAlign: 'right'
        }, [new wjcGrid.CellRange(10, 4, 12, 4)]);
    };
    Formulas.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", { id: "formulas" }, "Formulas"),
            React.createElement("p", null,
                "The FlexSheet control has a built-in calculation engine that supports over 80 functions just like Microsoft Excel. (",
                React.createElement("a", { href: "http://wijmo.com/5/docs/static/FlexSheetFunctions.html", target: "_blank" }, "See complete list."),
                ")"),
            React.createElement("div", { className: "row" },
                React.createElement("div", { className: "col-md-5" },
                    React.createElement("ul", { className: "nav nav-tabs", role: "tablist" },
                        React.createElement("li", { className: "active" },
                            React.createElement("a", { href: "#fmJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#fmJs", role: "tab", "data-toggle": "tab" }, "TS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "fmJsx" },
                            '<wjGridSheet.FlexSheet\n',
                            '    initialized={this.formulaSheetInit.bind(this)} />\n',
                            '<div><b>Cell Content: </b>{this.state.currentCellData}</div>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "fmJs" },
                            '    formulaSheet: wjcGridSheet.FlexSheet;\n',
                            '\n',
                            '    constructor(props) {\n',
                            '        super(props);\n',
                            '        this.state = {\n',
                            '            currentCellData: \'\'\n',
                            '        }\n',
                            '    }\n',
                            '\n',
                            '    formulaSheetInit(formulaSheet: wjcGridSheet.FlexSheet) {\n',
                            '        let sheet1 = new wjcGridSheet.Sheet(formulaSheet, null, \'Expence Report\', 14, 6);\n',
                            '        this.formulaSheet = formulaSheet;\n',
                            '        formulaSheet.sheets.push(sheet1);\n',
                            '        if (formulaSheet) {\n',
                            '            formulaSheet.selectionChanged.addHandler((sender: any, args: wjcGrid.CellRangeEventArgs) => {\n',
                            '                let selection = args.range;\n',
                            '                if (selection.isValid) {\n',
                            '                    this.setState({\n',
                            '                        currentCellData: formulaSheet.getCellData(selection.row, selection.col, true)\n',
                            '                    });\n',
                            '                }\n',
                            '            });\n',
                            '            formulaSheet.deferUpdate(() => {\n',
                            '                this._generateExpenceReport(formulaSheet);\n',
                            '            });\n',
                            '        }\n',
                            '    }\n'))),
                React.createElement("div", { className: "col-md-7" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(wjGridSheet.FlexSheet, { initialized: this.formulaSheetInit.bind(this) }),
                    React.createElement("div", null,
                        React.createElement("b", null, "Cell Content: "),
                        this.state.currentCellData))));
    };
    return Formulas;
}(React.Component));
exports.Formulas = Formulas;
//# sourceMappingURL=Formulas.js.map