/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { FormFieldComponentDelegate } from '../core/delegates';
import { TEXT_FIELD_CONSTANTS } from '../text-field';
import { DATE_RANGE_PICKER_CONSTANTS } from './date-range-picker-constants';
export class DateRangeComponentDelegate extends FormFieldComponentDelegate {
    constructor(config) {
        super(config);
    }
    _build() {
        const dateRangePicker = document.createElement(DATE_RANGE_PICKER_CONSTANTS.elementName);
        this._attachTextField(dateRangePicker);
        return dateRangePicker;
    }
    get fromInput() {
        return this._textField.querySelector(`input[${TEXT_FIELD_CONSTANTS.attributes.MULTI_INPUT}-0]`);
    }
    get toInput() {
        return this._textField.querySelector(`input[${TEXT_FIELD_CONSTANTS.attributes.MULTI_INPUT}-1]`);
    }
    get textField() {
        return this._textField;
    }
    get value() {
        return this._element.value;
    }
    set value(value) {
        this._element.value = value;
    }
    get disabled() {
        return this._element.disabled;
    }
    set disabled(value) {
        this._element.disabled = value;
    }
    get invalid() {
        return this._textField.invalid || false;
    }
    set invalid(value) {
        this._textField.invalid = value;
    }
    onChange(listener) {
        this._element.addEventListener(DATE_RANGE_PICKER_CONSTANTS.events.CHANGE, (evt) => listener(evt.detail));
    }
    onFocus(listener) {
        this._element.addEventListener('focusin', (evt) => {
            const isFocusWithin = !this._element.contains(evt.relatedTarget);
            if (isFocusWithin) {
                listener(evt);
            }
        });
    }
    onBlur(listener) {
        this._element.addEventListener('focusout', (evt) => {
            const isFocusOutside = !this._element.contains(evt.relatedTarget);
            if (isFocusOutside) {
                listener(evt);
            }
        });
    }
    _attachTextField(dateRangePicker) {
        var _a, _b, _c, _d, _e;
        this._textField = document.createElement(TEXT_FIELD_CONSTANTS.elementName);
        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.required) {
            this._textField.required = true;
        }
        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.density) {
            this._textField.density = this._config.options.density;
        }
        this._fromInput = document.createElement('input');
        this._fromInput.type = 'text';
        this._fromInput.placeholder = ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.fromPlaceholder) || 'From';
        this._textField.appendChild(this._fromInput);
        this._toInput = document.createElement('input');
        this._toInput.type = 'text';
        this._toInput.placeholder = ((_d = this._config.options) === null || _d === void 0 ? void 0 : _d.toPlaceholder) || 'To';
        this._textField.appendChild(this._toInput);
        const label = document.createElement('label');
        label.textContent = ((_e = this._config.options) === null || _e === void 0 ? void 0 : _e.label) || 'Choose date range';
        this._textField.appendChild(label);
        dateRangePicker.appendChild(this._textField);
    }
}
