var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { css, customElement, html, ifDefined, property, state } from '../../../../external/lit/index.js';
import { UmbChangeEvent } from '../../event/index.js';
import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../validation/index.js';
import { UmbLitElement } from '../../lit-element/index.js';
/**
 *
 * @param value
 */
function getNumberOrUndefined(value) {
    const num = parseInt(value, 10);
    return isNaN(num) ? undefined : num;
}
let UmbInputNumberRangeElement = class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElement) {
    set minValue(value) {
        this._minValue = value;
        this.#updateValue();
    }
    get minValue() {
        return this._minValue;
    }
    set maxValue(value) {
        this._maxValue = value;
        this.#updateValue();
    }
    get maxValue() {
        return this._maxValue;
    }
    set validationRange(value) {
        this.#validationRange = value;
        this._minPlaceholder = value?.min !== undefined ? String(value?.min) : '';
        this._maxPlaceholder = value?.max !== undefined && value.max !== Infinity ? String(value.max) : '∞';
    }
    get validationRange() {
        return this.#validationRange;
    }
    #validationRange;
    #updateValue() {
        const newValue = this._minValue || this._maxValue ? (this._minValue ?? '') + ',' + (this._maxValue ?? '') : undefined;
        if (super.value !== newValue) {
            super.value = newValue;
        }
    }
    set value(valueString) {
        if (valueString !== this.value) {
            if (valueString === undefined) {
                this.minValue = this.maxValue = undefined;
                return;
            }
            const splittedValue = valueString.split(/[ ,]+/);
            this.minValue = getNumberOrUndefined(splittedValue[0]);
            this.maxValue = getNumberOrUndefined(splittedValue[1]);
        }
    }
    get value() {
        return this.minValue || this.maxValue ? (this.minValue || '') + ',' + (this.maxValue || '') : undefined;
    }
    constructor() {
        super();
        this.minLabel = 'Low value';
        this.maxLabel = 'High value';
        this.required = false;
        this.requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
        this._minPlaceholder = '';
        this._maxPlaceholder = '';
        this.addValidator('valueMissing', () => this.requiredMessage, () => this.required && (this._minValue == null || this._maxValue == null));
        this.addValidator('patternMismatch', () => {
            return '#validation_rangeExceeds';
        }, () => {
            return this._minValue !== undefined && this._maxValue !== undefined ? this._minValue > this._maxValue : false;
        });
    }
    firstUpdated() {
        this.shadowRoot?.querySelectorAll('uui-input').forEach((x) => this.addFormControlElement(x));
    }
    focus() {
        return this.shadowRoot?.querySelector('uui-input')?.focus();
    }
    #onMinInput(e) {
        const value = e.target.value;
        this.minValue = value ? Number(value) : undefined;
        this.dispatchEvent(new UmbChangeEvent());
    }
    #onMaxInput(e) {
        const value = e.target.value;
        this.maxValue = value ? Number(value) : undefined;
        this.dispatchEvent(new UmbChangeEvent());
    }
    render() {
        return html `
			<uui-input
				type="number"
				label=${this.minLabel}
				min=${ifDefined(this.validationRange?.min)}
				max=${ifDefined(this.validationRange?.max)}
				placeholder=${this._minPlaceholder}
				?required=${this.required}
				.value=${this._minValue?.toString() ?? ''}
				@input=${this.#onMinInput}></uui-input>
			<b>–</b>
			<uui-input
				type="number"
				label=${this.maxLabel}
				min=${ifDefined(this.validationRange?.min)}
				max=${ifDefined(this.validationRange?.max)}
				placeholder=${this._maxPlaceholder}
				?required=${this.required}
				.value=${this._maxValue?.toString() ?? ''}
				@input=${this.#onMaxInput}></uui-input>
		`;
    }
    static { this.styles = css `
		:host {
			display: flex;
			align-items: center;
		}
		b {
			margin: 0 var(--uui-size-space-1);
		}
		:host(:invalid:not([pristine])) {
			color: var(--uui-color-invalid);
		}
		:host(:invalid:not([pristine])) uui-input {
			border-color: var(--uui-color-invalid);
		}
	`; }
};
__decorate([
    property({ type: String, attribute: 'min-label' })
], UmbInputNumberRangeElement.prototype, "minLabel", void 0);
__decorate([
    property({ type: String, attribute: 'max-label' })
], UmbInputNumberRangeElement.prototype, "maxLabel", void 0);
__decorate([
    state()
], UmbInputNumberRangeElement.prototype, "_minValue", void 0);
__decorate([
    property({ type: Number })
], UmbInputNumberRangeElement.prototype, "minValue", null);
__decorate([
    property({ type: Boolean })
], UmbInputNumberRangeElement.prototype, "required", void 0);
__decorate([
    property({ type: String })
], UmbInputNumberRangeElement.prototype, "requiredMessage", void 0);
__decorate([
    state()
], UmbInputNumberRangeElement.prototype, "_maxValue", void 0);
__decorate([
    property({ type: Number })
], UmbInputNumberRangeElement.prototype, "maxValue", null);
__decorate([
    property({ type: Object })
], UmbInputNumberRangeElement.prototype, "validationRange", null);
__decorate([
    state()
], UmbInputNumberRangeElement.prototype, "_minPlaceholder", void 0);
__decorate([
    state()
], UmbInputNumberRangeElement.prototype, "_maxPlaceholder", void 0);
__decorate([
    property()
], UmbInputNumberRangeElement.prototype, "value", null);
UmbInputNumberRangeElement = __decorate([
    customElement('umb-input-number-range')
], UmbInputNumberRangeElement);
export { UmbInputNumberRangeElement };
export default UmbInputNumberRangeElement;
