import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import reactCSS from '../helpers/reactcss';
import { addEventListener } from '../../utils/component/event-handler';
var EditableInput = (function (_super) {
    __extends(EditableInput, _super);
    function EditableInput(props) {
        var _this = _super.call(this, props) || this;
        _this.inputRef = createRef();
        _this.eventCancelList = [];
        _this.handleBlur = function (e) {
            var blurValue = _this.state.blurValue;
            if (blurValue) {
                _this.setState({ value: blurValue, blurValue: null });
            }
            _this.props.onBlur && _this.props.onBlur(e);
        };
        _this.handleChange = function (e) {
            var _a;
            var label = !!_this.props.label;
            if (label) {
                _this.props.onChange((_a = {}, _a[_this.props.label] = e.target.value, _a), e);
            }
            else {
                _this.props.onChange(e.target.value, e);
            }
            _this.setState({ value: e.target.value });
        };
        _this.handleKeyDown = function (e) {
            var _a, _b;
            var val = Number(e.target.value);
            if (isNaN(val)) {
                return;
            }
            var amount = _this.props.arrowOffset || 1;
            var key = e.key;
            if (key === 'ArrowUp') {
                if (_this.props.label !== null) {
                    _this.props.onChange((_a = {}, _a[_this.props.label] = val + amount, _a), e);
                }
                else {
                    _this.props.onChange(val + amount, e);
                }
                _this.setState({ value: val + amount });
            }
            if (key === 'ArrowDown') {
                if (_this.props.label !== null) {
                    _this.props.onChange((_b = {}, _b[_this.props.label] = val - amount, _b), e);
                }
                else {
                    _this.props.onChange(val - amount, e);
                }
                _this.setState({ value: val - amount });
            }
            if (key === 'Enter') {
                _this.props.onPressEnter && _this.props.onPressEnter(e);
            }
        };
        _this.handleDrag = function (e) {
            var _a;
            if (_this.props.dragLabel) {
                var newValue = Math.round(_this.props.value + e.movementX);
                if (newValue >= 0 && newValue <= _this.props.dragMax) {
                    _this.props.onChange((_a = {}, _a[_this.props.label] = newValue, _a), e);
                }
            }
        };
        _this.handleMouseDown = function (e) {
            if (_this.props.dragLabel) {
                e.preventDefault();
                _this.handleDrag(e);
                _this.eventCancelList.push(addEventListener(window, 'mousemove', _this.handleDrag));
                _this.eventCancelList.push(addEventListener(window, 'mouseup', _this.handleMouseUp, {
                    passive: true,
                }));
            }
        };
        _this.handleMouseUp = function () {
            _this.unbindEventListeners();
        };
        _this.unbindEventListeners = function () {
            _this.eventCancelList.forEach(function (cancel) { return cancel(); });
            _this.eventCancelList = [];
        };
        _this.state = {
            value: String(props.value).toUpperCase(),
            blurValue: String(props.value).toUpperCase(),
        };
        return _this;
    }
    EditableInput.prototype.componentDidUpdate = function (prevProps) {
        var input = this.inputRef.current;
        var val = this.props.value;
        if (prevProps.value !== val && val !== this.state.value) {
            if (input === document.activeElement) {
                this.setState({ blurValue: String(val).toUpperCase() });
            }
            else {
                this.setState({ value: String(val).toUpperCase() });
            }
        }
    };
    EditableInput.prototype.componentWillUnmount = function () {
        this.unbindEventListeners();
    };
    EditableInput.prototype.render = function () {
        var styles = reactCSS({
            default: {
                wrap: {
                    position: 'relative',
                },
            },
            'user-override': {
                wrap: this.props.style && this.props.style.wrap
                    ? this.props.style.wrap
                    : {},
                input: this.props.style && this.props.style.input
                    ? this.props.style.input
                    : {},
                label: this.props.style && this.props.style.label
                    ? this.props.style.label
                    : {},
            },
            'dragLabel-true': {
                label: {
                    cursor: 'ew-resize',
                },
            },
        }, {
            'user-override': true,
        }, this.props);
        return (_jsxs("div", __assign({ style: styles.wrap, "data-zv": 'v10.0.11' }, { children: [_jsx("input", { style: styles.input, ref: this.inputRef, value: this.state.value, onKeyDown: this.handleKeyDown, onChange: this.handleChange, onBlur: this.handleBlur, placeholder: this.props.placeholder, "data-zv": 'v10.0.11' }, void 0), this.props.label ? (_jsx("span", __assign({ style: styles.label, onMouseDown: this.handleMouseDown, "data-zv": 'v10.0.11' }, { children: this.props.label }), void 0)) : null] }), void 0));
    };
    return EditableInput;
}(Component));
export default EditableInput;
