"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TestGrid = void 0;
var tslib_1 = require("tslib");
var ui_datagrid_debug_1 = require("@platform/ui.datagrid.debug");
var React = require("react");
var rxjs_1 = require("rxjs");
var operators_1 = require("rxjs/operators");
var common_1 = require("../common");
var SAMPLE_1 = require("../SAMPLE");
var Test_Grid_view_1 = require("./Test.Grid.view");
var TestGrid = (function (_super) {
    tslib_1.__extends(TestGrid, _super);
    function TestGrid() {
        var _a, _b, _c, _d;
        var _this = _super.apply(this, arguments) || this;
        _this.state = {};
        _this.unmounted$ = new rxjs_1.Subject();
        _this.state$ = new rxjs_1.Subject();
        _this.events$ = new rxjs_1.Subject();
        _this.grid = common_1.datagrid.Grid.create({
            totalColumns: 52,
            totalRows: 1000,
            getFunc: SAMPLE_1.getFunc,
            ns: ((_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.ns) || SAMPLE_1.SAMPLE.ns,
            cells: ((_b = _this.props.data) === null || _b === void 0 ? void 0 : _b.cells) || SAMPLE_1.SAMPLE.cells,
            columns: ((_c = _this.props.data) === null || _c === void 0 ? void 0 : _c.columns) || SAMPLE_1.SAMPLE.columns,
            rows: ((_d = _this.props.data) === null || _d === void 0 ? void 0 : _d.rows) || SAMPLE_1.SAMPLE.rows,
        });
        _this.getValueSync = function (key) {
            var cell = _this.grid.data.cells[key];
            return cell && typeof cell.value === 'string' ? cell.value : undefined;
        };
        _this.getValue = function (key) { return tslib_1.__awaiter(_this, void 0, void 0, function () { return tslib_1.__generator(this, function (_a) {
            return [2, this.getValueSync(key)];
        }); }); };
        _this.refTable = common_1.coord.refs.table({
            getKeys: function () { return tslib_1.__awaiter(_this, void 0, void 0, function () { return tslib_1.__generator(this, function (_a) {
                return [2, Object.keys(this.grid.data.cells)];
            }); }); },
            getValue: _this.getValue,
        });
        _this.setLink = function (key, uri, cellKey) {
            var _a;
            cellKey = cellKey || _this.lastSelection.cell || '';
            if (cellKey) {
                var cell = _this.grid.data.cells[cellKey];
                var res = common_1.util.cell.value.cellData(cell).setLink(key, uri);
                _this.grid.changeCells((_a = {}, _a[cellKey] = res, _a));
            }
        };
        _this.postData = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
            return tslib_1.__generator(this, function (_a) {
                return [2];
            });
        }); };
        _this.button = function (label, handler) {
            return React.createElement(common_1.Button, { label: label, onClick: handler, block: true });
        };
        _this.handleRefresh = function (e) {
            var onRefresh = _this.props.onRefresh;
            if (onRefresh) {
                onRefresh(e);
            }
        };
        return _this;
    }
    TestGrid.prototype.componentDidMount = function () {
        var _this = this;
        var state$ = this.state$.pipe(operators_1.takeUntil(this.unmounted$));
        state$.subscribe(function (e) { return _this.setState(e); });
        var events$ = this.events$.pipe(operators_1.takeUntil(this.unmounted$));
        events$
            .pipe(operators_1.filter(function (e) { return e.type === 'GRID/selection'; }), operators_1.map(function (e) { return e.payload; }))
            .subscribe(function (e) {
            if (e.to.cell || !_this.state.lastSelection) {
                _this.state$.next({ lastSelection: e.to });
            }
        });
        events$
            .pipe(operators_1.filter(function (e) {
            return e.type === 'GRID/cells/change' ||
                e.type === 'GRID/rows/change' ||
                e.type === 'GRID/columns/change';
        }), operators_1.map(function (e) { return e.payload; }), operators_1.debounceTime(1500))
            .subscribe(function (e) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
            var res;
            return tslib_1.__generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        console.log('🌼 POST (save)', e);
                        return [4, this.postData()];
                    case 1:
                        res = _a.sent();
                        console.log('SAVED', res);
                        return [2];
                }
            });
        }); });
        events$
            .pipe(operators_1.filter(function (e) { return e.type === 'GRID/cells/change'; }), operators_1.map(function (e) { return e.payload; }), operators_1.delay(0))
            .subscribe(function (e) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
            var wait;
            var _this = this;
            return tslib_1.__generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        common_1.log.info('🐷 IGridCellsChanged', e);
                        wait = e.changes
                            .filter(function (e) { return e.isChanged; })
                            .map(function (change) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
                            var key, toValue, from, to;
                            return tslib_1.__generator(this, function (_a) {
                                switch (_a.label) {
                                    case 0:
                                        key = change.cell.key;
                                        toValue = function (data) {
                                            return data && data.value ? data.value.toString() : undefined;
                                        };
                                        from = toValue(change.value.from);
                                        to = toValue(change.value.to);
                                        return [4, this.refTable.update({ key: key, from: from, to: to })];
                                    case 1:
                                        _a.sent();
                                        return [2];
                                }
                            });
                        }); });
                        return [4, Promise.all(wait)];
                    case 1:
                        _a.sent();
                        return [2];
                }
            });
        }); });
        events$
            .pipe(operators_1.filter(function () { return true; }), operators_1.filter(function (e) { return e.type === 'GRID/EDITOR/end'; }), operators_1.map(function (e) { return e.payload; }))
            .subscribe(function (e) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
            return tslib_1.__generator(this, function (_a) {
                console.group('🌳 EDIT END');
                console.log('e', e);
                console.groupEnd();
                return [2];
            });
        }); });
        var command$ = events$.pipe(operators_1.filter(function (e) { return e.type === 'GRID/command'; }), operators_1.map(function (e) { return e.payload; }));
        command$.subscribe(function (e) {
            common_1.log.info('🐷 COMMAND:', e.command, e);
        });
        events$
            .pipe(operators_1.filter(function (e) { return e.type === 'GRID/clipboard'; }), operators_1.map(function (e) { return e.payload; }))
            .subscribe(function (e) {
            common_1.log.info('📋 CLIPBOARD', e);
        });
        events$
            .pipe(operators_1.filter(function (e) { return e.type === 'GRID/clipboard/before/paste'; }), operators_1.map(function (e) { return e.payload; }))
            .subscribe(function (e) {
            if (e.pending) {
                var cells = tslib_1.__assign(tslib_1.__assign({}, e.pending.cells), { A1: { value: 'boo' } });
                console.log('cells', cells);
            }
        });
        var gridEvents$ = this.grid.events$.pipe(operators_1.takeUntil(this.unmounted$));
        gridEvents$.pipe(operators_1.debounceTime(10)).subscribe(function () { return _this.updateState(); });
        this.updateState();
    };
    TestGrid.prototype.componentWillUnmount = function () {
        this.unmounted$.next();
    };
    Object.defineProperty(TestGrid.prototype, "lastSelection", {
        get: function () {
            return this.state.lastSelection || { ranges: [] };
        },
        enumerable: false,
        configurable: true
    });
    TestGrid.prototype.updateState = function () {
        return tslib_1.__awaiter(this, void 0, void 0, function () {
            var editorType, data;
            return tslib_1.__generator(this, function (_a) {
                editorType = this.props.editorType;
                data = {
                    debug: { editorType: editorType },
                };
                this.state$.next({ data: data });
                return [2, data];
            });
        });
    };
    TestGrid.prototype.overlayFromCell = function (cell) {
        var data = this.grid.data.cells[cell || ''];
        var view = data && data.props ? common_1.util.toGridCellProps(data.props).view : {};
        var screen = view ? view.screen : undefined;
        if (data && screen && cell) {
            this.grid.command({
                command: 'OVERLAY/show',
                props: { screen: screen, cell: cell },
            });
        }
        else {
            this.grid.command({ command: 'OVERLAY/hide', props: {} });
        }
    };
    TestGrid.prototype.render = function () {
        var styles = {
            base: common_1.css({
                Absolute: 0,
                Flex: 'horizontal-stretch-stretch',
                backgroundColor: common_1.color.format(-0.08),
            }),
        };
        return (React.createElement("div", tslib_1.__assign({}, styles.base),
            this.props.left && this.renderLeft(),
            this.renderMain(),
            this.renderRight()));
    };
    TestGrid.prototype.renderLeft = function () {
        var _this = this;
        var styles = {
            base: common_1.css({
                Flex: 'vertical-start-start',
                position: 'relative',
                width: 230,
                padding: 10,
                Scroll: true,
                fontSize: 13,
                lineHeight: 1.6,
                borderRight: "solid 1px " + common_1.color.format(-0.1),
            }),
        };
        return (React.createElement("div", tslib_1.__assign({}, styles.base),
            this.button('calc (all)', function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
                var cells;
                return tslib_1.__generator(this, function (_a) {
                    cells = Object.keys(this.grid.data.cells);
                    this.grid.calc.update({ cells: cells });
                    return [2];
                });
            }); }),
            React.createElement(common_1.Hr, { margin: 5 }),
            this.button('redraw', function () { return _this.grid.redraw(); }),
            this.button('focus', function () { return _this.grid.focus(); }),
            this.button('updateHashes', function () {
                _this.grid.updateHashes({ force: true });
                _this.updateState();
            }),
            React.createElement(common_1.Hr, { margin: 5 }),
            this.button('changeCells', function () { return _this.grid.changeCells({ A1: { value: 'hello' } }); }),
            this.button('changeCells (props)', function () {
                return _this.grid.changeCells({ A1: { value: 'hello', props: { style: { bold: true } } } });
            }),
            this.button('mergeCells (A5)', function () {
                _this.grid.changeCells({
                    A5: { value: 'merged', props: { merge: { colspan: 3, rowspan: 5 } } },
                });
                _this.grid.select({ cell: 'A5' });
            }),
            this.button('props.value (A1)', function () {
                _this.grid.changeCells({
                    A1: { value: 'A1', props: { value: 'Display Value' } },
                });
            }),
            React.createElement(common_1.Hr, { margin: 5 }),
            this.button('columns (width) - A:200', function () {
                return _this.grid.changeColumns({ A: { props: { grid: { width: 200 } } } });
            }),
            this.button('columns (width) - A:300', function () {
                return _this.grid.changeColumns({ A: { props: { grid: { width: 300 } } } });
            }),
            this.button('rows (height) - 1:0', function () {
                return _this.grid.changeRows({ '1': { props: { grid: { height: 0 } } } });
            }),
            this.button('rows (height) - 1:120', function () {
                return _this.grid.changeRows({ '1': { props: { grid: { height: 120 } } } });
            }),
            React.createElement(common_1.Hr, { margin: 5 }),
            this.button('select: A1', function () { return _this.grid.select({ cell: 'A1' }); }),
            this.button('select: A1 and range', function () {
                return _this.grid.select({ cell: 'A1', ranges: ['B2:C4', 'C2:D7'] });
            }),
            this.button('select: bottom/right', function () {
                _this.grid.select({
                    cell: { row: _this.grid.totalRows, column: _this.grid.totalColumns },
                });
            }),
            this.button('select column: B:B', function () { return _this.grid.select({ cell: 'B1', ranges: ['B:B'] }); }),
            this.button('select row: 3:3', function () { return _this.grid.select({ cell: 'A3', ranges: ['3:3'] }); }),
            this.button('select row and column', function () {
                return _this.grid.select({ cell: 'B1', ranges: ['3:3', 'B:B'], scrollToCell: false });
            }),
            React.createElement(common_1.Hr, { margin: 5 }),
            this.button('scrollTo: A1', function () { return _this.grid.scrollTo({ cell: 'A1' }); }),
            this.button('scrollTo: B5', function () { return _this.grid.scrollTo({ cell: 'B5' }); }),
            this.button('scrollTo: bottom/right', function () {
                _this.grid.scrollTo({
                    cell: { row: _this.grid.totalRows, column: _this.grid.totalColumns },
                });
            }),
            React.createElement(common_1.Hr, { margin: 5 }),
            this.button('screen: hide', function () {
                _this.grid.command({ command: 'OVERLAY/hide', props: {} });
            }),
            this.button('screen: current selection', function () {
                var cell = _this.lastSelection.cell;
                _this.overlayFromCell(cell);
            }),
            this.button('screen: A1 (none defined)', function () { return _this.overlayFromCell('A1'); }),
            this.button('screen: C1 (sample)', function () { return _this.overlayFromCell('C1'); }),
            this.button('screen: C2 (child namespace)', function () { return _this.overlayFromCell('C2'); }),
            React.createElement(common_1.Hr, { margin: 5 }),
            React.createElement(Label, null, "links"),
            this.button('main:"ns:abc"', function () { return _this.setLink('main', 'ns:abc'); }),
            this.button('main:"ns:def"', function () { return _this.setLink('main', 'ns:def'); }),
            this.button('main: undefined', function () { return _this.setLink('main', undefined); }),
            React.createElement(common_1.Hr, { margin: 5 }),
            React.createElement(Label, null, "http (localhost)"),
            this.button('post current data', function () { return _this.postData(); })));
    };
    TestGrid.prototype.renderMain = function () {
        var styles = {
            base: common_1.css({ position: 'relative', flex: 1 }),
            inner: common_1.css({
                Absolute: 0,
            }),
            grid: common_1.css({ Absolute: 0 }),
        };
        return (React.createElement("div", tslib_1.__assign({}, styles.base),
            React.createElement("div", tslib_1.__assign({}, styles.inner),
                React.createElement(Test_Grid_view_1.TestGridView, { style: styles.grid, grid: this.grid, editorType: this.props.editorType, "events$": this.events$ }))));
    };
    TestGrid.prototype.renderRight = function () {
        var data = this.state.data;
        if (!data) {
            return null;
        }
        var styles = {
            base: common_1.css({
                position: 'relative',
                backgroundColor: common_1.COLORS.DARK,
                color: common_1.COLORS.WHITE,
                width: 370,
                borderBottom: "solid 1px " + common_1.color.format(0.1),
            }),
        };
        return (React.createElement("div", tslib_1.__assign({}, styles.base),
            React.createElement(ui_datagrid_debug_1.Debug, { grid: this.grid, onRefresh: this.handleRefresh })));
    };
    return TestGrid;
}(React.PureComponent));
exports.TestGrid = TestGrid;
var Label = function (props) {
    var styles = {
        base: common_1.css({
            fontSize: 12,
            opacity: 0.4,
            marginBottom: 2,
            fontFamily: common_1.constants.MONOSPACE.FAMILY,
        }),
    };
    return (React.createElement("div", tslib_1.__assign({}, common_1.css(styles.base, props.style), { title: props.tooltip }), props.children));
};
