"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const classnames_1 = require("../../../../../client/classnames");
const getDatumSize_1 = require("../../../../../client/component/getDatumSize");
const element_1 = require("../../../../../client/element");
const blur_1 = require("../../../../../client/event/focus/blur");
const focus_1 = require("../../../../../client/event/focus/focus");
const input_1 = require("../../../../../client/event/input");
const keyboard_1 = require("../../../../../client/event/keyboard");
const paste_1 = require("../../../../../client/event/paste");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const Component_1 = require("../../value/TextField/Component");
class DataTreeLeaf extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._on_input = (value) => {
            const { path } = this.$props;
            const width = (0, getDatumSize_1.getLeafWidth)(value);
            // mergeStyle(this._input, {
            //   width: `${width}px`,
            // })
            this._input.$element.style.width = `${width}px`;
            value = value.replace(/\\n/g, '\n');
            this.dispatchEvent('leafinput', {
                value,
                path,
            });
        };
        this._on_keydown = (event, _event) => {
            // console.log('DataLeaf', '_on_keydown')
            const { path } = this.$props;
            const { value } = this._input.$element;
            // TODO `getSelectionStart`
            const { selectionStart } = this._input.$element;
            this.dispatchEvent('leafkeydown', {
                value,
                path,
                event,
                _event,
                selectionStart,
            }, true);
        };
        this._on_focus = (event, _event) => {
            const { path, value } = this.$props;
            this.dispatchEvent('leaffocus', { path, value, event, _event });
        };
        this._on_blur = (event, _event) => {
            const { path, value } = this.$props;
            this.dispatchEvent('leafblur', { path, value, event, _event });
        };
        this._on_paste = (text) => {
            // console.log('Leaf', '_on_paste')
            const { path, value } = this.$props;
            this.dispatchEvent('leafpaste', { path, value, text });
        };
        this.focus = (options = { preventScroll: true }) => {
            this._input.$element.focus(options);
        };
        this.blur = () => {
            this._input.$element.blur();
        };
        let { className, style, value } = $props;
        const _value = this._parse_value();
        const width = (0, getDatumSize_1.getLeafWidth)(value);
        const height = getDatumSize_1.LEAF_HEIGHT;
        const input = new Component_1.default({
            className: (0, classnames_1.default)('data-tree-leaf', className),
            style: Object.assign({ position: 'relative', display: 'flex', width: `${width}px`, height: `${height}px`, caretColor: 'inherit', fontSize: '12px', overflowY: 'hidden', overflowX: 'hidden' }, style),
            value: _value,
        }, this.$system);
        this._input = input;
        input.addEventListener((0, input_1.makeInputListener)(this._on_input));
        input.addEventListener((0, focus_1.makeFocusListener)(this._on_focus));
        input.addEventListener((0, blur_1.makeBlurListener)(this._on_blur));
        input.addEventListener((0, keyboard_1.makeKeydownListener)(this._on_keydown));
        input.addEventListener((0, paste_1.makePasteListener)(this._on_paste));
        input.preventDefault('paste');
        const $element = (0, parentElement_1.default)($system);
        this.$element = $element;
        this.$slot = {
            default: input,
        };
        this.$unbundled = false;
        this.$primitive = true;
        this.setSubComponents({
            input,
        });
        this.registerRoot(input);
    }
    _parse_value() {
        const { value } = this.$props;
        let _value = value;
        _value = _value.slice(0, 1000);
        _value = _value.replace(/\n/g, '\\n');
        return _value;
    }
    onPropChanged(prop, current) {
        if (prop === 'data') {
            const width = (0, getDatumSize_1.getLeafWidth)(current.value);
            // AD HOC
            const _value = this._parse_value();
            this._input.setProp('value', _value);
            // mergeStyle(this._input, {
            //   width: `${width}px`,
            // })
            this._input.$element.style.width = `${width}px`;
        }
    }
    setSelectionRange(start, end, direction) {
        this._input.setSelectionRange(start, end, direction);
    }
}
exports.default = DataTreeLeaf;
//# sourceMappingURL=Component.js.map