"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const classnames_1 = require("../../../../../client/classnames");
const getDatumSize_1 = require("../../../../../client/component/getDatumSize");
const DEFAULT_FONT_SIZE_1 = require("../../../../../client/DEFAULT_FONT_SIZE");
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 pointerdown_1 = require("../../../../../client/event/pointer/pointerdown");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const Component_1 = __importDefault(require("../../value/TextField/Component"));
class DataTreeLeaf extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._refresh_size = () => {
            const { api: { text: { measureText }, }, } = this.$system;
            const { fontSize = DEFAULT_FONT_SIZE_1.DEFAULT_FONT_SIZE } = this.$props;
            const _value = this._parse_value();
            const width = (0, getDatumSize_1.getLeafWidth)(_value, fontSize, measureText);
            const height = (0, getDatumSize_1.getLeafHeight)(_value, fontSize, measureText);
            this._input.$element.style.width = `${width}px`;
            this._input.$element.style.height = `${height}px`;
        };
        this._on_input = (value) => {
            const { api: { text: { measureText }, }, } = this.$system;
            const { path, fontSize } = this.$props;
            const width = (0, getDatumSize_1.getLeafWidth)(value, fontSize, measureText);
            // mergeStyle(this._input, {
            //   width: `${width}px`,
            // })
            this._input.$element.style.width = `${width}px`;
            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._on_pointer_down = (event, _event) => {
            const { path, value } = this.$props;
            this.dispatchEvent('leafpointerdown', { path, value, event, _event });
        };
        this.focus = (options = { preventScroll: true }) => {
            this._input.$element.focus(options);
        };
        this.blur = () => {
            this._input.$element.blur();
        };
        const { api: { text: { measureText }, }, } = this.$system;
        let { className, style, value, fontSize, path = [], attr = {} } = $props;
        const _value = this._parse_value();
        const width = (0, getDatumSize_1.getLeafWidth)(value, fontSize, measureText);
        const height = (0, getDatumSize_1.getLeafHeight)(value, fontSize, measureText);
        const input = new Component_1.default({
            className: (0, classnames_1.classnames)('data-tree-leaf', className),
            attr,
            style: {
                position: 'relative',
                display: 'flex',
                width: `${width}px`,
                height: `${height}px`,
                fontSize: 'inherit',
                caretColor: 'inherit',
                overflowY: 'hidden',
                overflowX: 'hidden',
                // maxWidth: '100px',
                // textOverflow: 'ellipsis',
                // ...userSelect('none'),
                ...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.addEventListener((0, pointerdown_1.makePointerDownListener)(this._on_pointer_down));
        input.preventDefault('paste');
        const $element = (0, parentElement_1.parentElement)($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 === 'value') {
            const _value = this._parse_value();
            this._input.setProp('value', _value);
            this._refresh_size();
        }
        else if (prop === 'fontSize') {
            this._refresh_size();
        }
    }
    setSelectionRange(start, end, direction) {
        this._input.setSelectionRange(start, end, direction);
    }
}
exports.default = DataTreeLeaf;
//# sourceMappingURL=Component.js.map