"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DebugEditor = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var rxjs_1 = require("rxjs");
var operators_1 = require("rxjs/operators");
var common_1 = require("../common");
var PADDING = 10;
var DebugEditor = (function (_super) {
    tslib_1.__extends(DebugEditor, _super);
    function DebugEditor() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {};
        _this.unmounted$ = new rxjs_1.Subject();
        _this.state$ = new rxjs_1.Subject();
        _this.inputRef = function (ref) { return (_this.input = ref); };
        _this.handleChange = function (e) {
            var value = e.target.value;
            _this.state$.next({ value: value });
            common_1.time.delay(0, function () { return _this.updateSize(); });
        };
        return _this;
    }
    DebugEditor.prototype.componentDidMount = function () {
        var _this = this;
        var isMounted = false;
        var state$ = this.state$.pipe(operators_1.takeUntil(this.unmounted$));
        state$.subscribe(function (e) { return _this.setState(e); });
        var keys$ = this.context.keys$;
        keys$
            .pipe(operators_1.filter(function () { return isMounted; }), operators_1.filter(function (e) { return e.isEnter; }), operators_1.filter(function (e) { return e.metaKey; }))
            .subscribe(function (e) {
            _this.context.complete();
        });
        state$.subscribe(function (e) {
            _this.context.set({ value: _this.value });
        });
        var value = this.context.cell.data.value;
        this.state$.next({ value: value });
        common_1.time.delay(100, function () { return (isMounted = true); });
        this.input.focus();
        this.input.select();
        this.updateSize();
    };
    DebugEditor.prototype.componentWillUnmount = function () {
        this.unmounted$.next();
    };
    Object.defineProperty(DebugEditor.prototype, "value", {
        get: function () {
            return (this.state.value || '').toString();
        },
        enumerable: false,
        configurable: true
    });
    DebugEditor.prototype.updateSize = function () {
        var content = React.createElement("div", tslib_1.__assign({}, STYLES.inputText), this.state.value);
        var textSize = common_1.MeasureSize.measure({ content: content, style: STYLES.input });
        var textWidth = textSize.width;
        var cell = this.context.cell;
        var rightCell = cell.siblings.right;
        var width = cell.width + (rightCell ? rightCell.width : 0) - PADDING * 2 - 10;
        this.state$.next({ textWidth: textWidth, width: width });
    };
    DebugEditor.prototype.render = function () {
        var styles = {
            base: common_1.css({
                boxSizing: 'border-box',
                backgroundColor: 'rgba(255, 0, 0, 0.1)',
                padding: PADDING,
                borderRadius: 4,
                border: "solid 1px " + common_1.color.format(-0.1),
                width: this.state.width,
                Flex: 'vertical-stetch-stretch',
            }),
            input: common_1.css({
                outline: 'none',
                marginBottom: 4,
            }),
        };
        var data = {
            textWidth: this.state.textWidth,
            context: this.context,
        };
        return (React.createElement("div", tslib_1.__assign({}, common_1.css(styles.base, this.props.style)),
            React.createElement("input", tslib_1.__assign({}, common_1.css(STYLES.inputText, styles.input), { ref: this.inputRef, value: this.value, onChange: this.handleChange })),
            React.createElement(common_1.ObjectView, { name: 'editor', data: data, fontSize: 9 })));
    };
    DebugEditor.contextType = common_1.datagrid.EditorContext;
    return DebugEditor;
}(React.PureComponent));
exports.DebugEditor = DebugEditor;
var STYLES = {
    inputText: common_1.css({
        fontSize: 14,
    }),
    input: common_1.css({
        boxSizing: 'border-box',
        outline: 'none',
        marginBottom: 4,
    }),
};
