var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        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 extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import { TextCell } from '../../lib/Cells/TextCell';
import { DynaGrid } from '../../lib/Components/DynaGrid';
import { HeaderCell } from '../../lib/Cells/HeaderCell';
var Spreadsheet = (function (_super) {
    __extends(Spreadsheet, _super);
    function Spreadsheet(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            widths: Array(30).fill(120),
            data: Array(1000).fill(0).map(function (_, ri) { return Array(30).fill(0).map(function (_, ci) { return (ri + 100) + ' - ' + (ci + 100); }); })
        };
        return _this;
    }
    Spreadsheet.prototype.generateCellMatrix = function () {
        var _this = this;
        var columns = this.state.data[0].map(function (c, idx) { return ({
            id: idx,
            width: _this.state.widths[idx],
            onDrop: function (ids) { return _this.reorderColumns(ids, idx); },
            reorderable: true,
            resizable: true,
            onResize: function (width) { _this.state.widths[idx] = 120, _this.forceUpdate(); }
        }); });
        console.log(this.state);
        var rows = this.state.data.map(function (row, rowIdx) { return ({
            id: rowIdx,
            height: 25,
            reorderable: false,
            cells: row.map(function (data) { return rowIdx === 0 ? new HeaderCell(data) : new TextCell(data); })
        }); });
        return ({ frozenTopRows: 2, frozenLeftColumns: 2, frozenBottomRows: 2, frozenRightColumns: 2, rows: rows, columns: columns });
    };
    Spreadsheet.prototype.calculateColumnReorder = function (row, colIdxs, direction, destination) {
        var movedColumns = row.filter(function (_, idx) { return colIdxs.includes(idx); });
        var clearedRow = row.filter(function (_, idx) { return !colIdxs.includes(idx); });
        if (direction === 'right') {
            destination = destination - colIdxs.length + 1;
        }
        clearedRow.splice.apply(clearedRow, [destination, 0].concat(movedColumns));
        return clearedRow;
    };
    Spreadsheet.prototype.render = function () {
        var _this = this;
        return <DynaGrid style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, fontFamily: 'Sans-Serif' }} cellMatrixProps={this.generateCellMatrix()} onDataChanged={function (changes) { return _this.handleDataChanges(changes); }}/>;
    };
    Spreadsheet.prototype.handleDataChanges = function (dataChanges) {
        var data = this.state.data;
        dataChanges.forEach(function (change) {
            data[change.rowId][change.columnId] = change.newData;
        });
        this.setState({ data: data });
    };
    Spreadsheet.prototype.reorderColumns = function (colIdxs, to) {
        var _this = this;
        var data = this.state.data.slice();
        if (to > colIdxs[0]) {
            data = data.map(function (r) { return _this.calculateColumnReorder(r, colIdxs, 'right', to); });
        }
        else {
            data = data.map(function (r) { return _this.calculateColumnReorder(r, colIdxs, 'left', to); });
        }
        this.setState({ data: data });
    };
    return Spreadsheet;
}(React.Component));
export { Spreadsheet };