/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { FormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate';
import { IconButtonComponentDelegate } from '../icon-button';
import { TextFieldComponentDelegate } from '../text-field/text-field-component-delegate';
import { QUANTITY_FIELD_CONSTANTS } from './quantity-field-constants';
import { tylIconRemoveCircleOutline, tylIconControlPoint } from '@tylertech/tyler-icons/standard';
import { IconRegistry } from '../icon';
export class QuantityFieldComponentDelegate extends FormFieldComponentDelegate {
    constructor(config) {
        super(config);
        IconRegistry.define([tylIconRemoveCircleOutline, tylIconControlPoint]);
    }
    _build() {
        const quantityField = document.createElement(QUANTITY_FIELD_CONSTANTS.elementName);
        this._attachButton(quantityField, tylIconRemoveCircleOutline.name, 'decrement-button');
        this._attachTextField(quantityField);
        this._attachButton(quantityField, tylIconControlPoint.name, 'increment-button');
        return quantityField;
    }
    _configure() {
        var _a, _b, _c, _d, _e;
        this.inputElement.value = (_b = (_a = this._config.options) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '0';
        this.inputElement.style.textAlign = 'center';
        this.inputElement.style.width = '64px';
        if ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.helperText) {
            this.setHelperText(this._config.options.helperText);
        }
        if (typeof ((_d = this._config.options) === null || _d === void 0 ? void 0 : _d.label) === 'string') {
            this._createLabel(this._config.options.label);
        }
        if (((_e = this._config.options) === null || _e === void 0 ? void 0 : _e.step) !== undefined) {
            this.inputElement.step = this._config.options.step;
        }
    }
    get value() {
        return this._textFieldDelegate.inputElement.value;
    }
    set value(value) {
        this._textFieldDelegate.inputElement.value = value;
    }
    get disabled() {
        return this._textFieldDelegate.inputElement.disabled;
    }
    set disabled(value) {
        this._textFieldDelegate.inputElement.disabled = value;
    }
    get invalid() {
        return this._element.invalid || false;
    }
    set invalid(value) {
        this._element.invalid = value;
    }
    get inputElement() {
        return this._textFieldDelegate.inputElement;
    }
    get labelElement() {
        return this._labelElement;
    }
    onChange(listener) {
        this._textFieldDelegate.inputElement.addEventListener('input', evt => listener(evt.target.value));
    }
    onFocus(listener) {
        this._textFieldDelegate.inputElement.addEventListener('focus', evt => listener(evt));
    }
    onBlur(listener) {
        this._textFieldDelegate.inputElement.addEventListener('blur', evt => listener(evt));
    }
    _attachTextField(quantityField) {
        var _a, _b, _c, _d, _e;
        const textFieldConfig = {
            props: Object.assign({}, (_b = (_a = this._config.options) === null || _a === void 0 ? void 0 : _a.textFieldDelegateConfig) === null || _b === void 0 ? void 0 : _b.props),
            options: Object.assign(Object.assign({}, (_d = (_c = this._config.options) === null || _c === void 0 ? void 0 : _c.textFieldDelegateConfig) === null || _d === void 0 ? void 0 : _d.options), { id: (_e = this._config.options) === null || _e === void 0 ? void 0 : _e.id, type: 'number' })
        };
        this._textFieldDelegate = new TextFieldComponentDelegate(textFieldConfig);
        quantityField.appendChild(this._textFieldDelegate.element);
    }
    setLabel(text) {
        if (text) {
            if (this._labelElement) {
                this._labelElement.textContent = text;
            }
            else {
                this._createLabel(text);
            }
        }
        else if (this._labelElement) {
            this._element.removeChild(this._labelElement);
            this._labelElement = undefined;
        }
    }
    setHelperText(text) {
        if (text) {
            if (!this._helperTextElement) {
                this._helperTextElement = document.createElement('span');
                this._helperTextElement.slot = 'helper-text';
                this._element.appendChild(this._helperTextElement);
            }
            this._helperTextElement.textContent = text;
        }
        else if (this._helperTextElement) {
            this._element.removeChild(this._helperTextElement);
            this._helperTextElement = undefined;
        }
    }
    _createLabel(text) {
        var _a;
        this._labelElement = document.createElement('label');
        this._labelElement.textContent = text;
        this._labelElement.slot = 'label';
        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.id) {
            this._labelElement.setAttribute('for', this._config.options.id);
        }
        this._element.appendChild(this._labelElement);
    }
    _attachButton(parent, iconName, slot) {
        const iconButtonDelegate = new IconButtonComponentDelegate({
            options: {
                iconName,
                parent,
                attributes: { slot }
            }
        });
        return iconButtonDelegate;
    }
}
