import { h } from "@stencil/core";
import { TimePickerService } from '../time-picker.service';
export class TimePickerInput {
    constructor() {
        this.minutes = false;
    }
    strategyWatcher() {
        this.assignLabel();
    }
    valueHandler(newValue) {
        this.digits = TimePickerService.padZero(newValue);
    }
    /**
     * Listens for input blur.
     */
    onAnjBlur() {
        this.debounceErrors();
        (this.minutes) ? this.minuteChangedHandler(this.digits) : this.hourChangedHandler(this.digits);
    }
    /**
     * Listens for input update.
     */
    onAnjInput(event) {
        this.digits = TimePickerService.padZero(event.detail.target.value);
        this.checkTab();
    }
    /**
     * Listens for child input focus, then highlights all input text
     * Typically used when an autotab is forced from the hour input to the minute input, to select all minute input text
     */
    onAnjFocus(event) {
        setTimeout(() => {
            const anjInput = event.target;
            anjInput.firstElementChild.select();
        }, 100);
    }
    /**
     * Allows input focus to be set from an external source
     * Typically used when opening the picker to set the focus to the hour input
     */
    async focusNativeInput() {
        this.input.setFocus();
    }
    componentWillLoad() {
        this.digits = TimePickerService.padZero(this.value);
        this.assignLabel();
        this.placeholderText = (this.minutes) ? 'mm' : 'hh';
        this.regexPattern = this.strategy.getRegex(this.minutes);
    }
    componentDidUpdate() {
        this.selectInput();
    }
    assignLabel() {
        this.label = this.strategy.getInputLabel(this.minutes);
    }
    checkTab() {
        const numDigits = Number(this.digits);
        if (!this.minutes && this.strategy.autoTab(numDigits)) {
            this.anjHourTab.emit();
        }
    }
    displayErrors(invalid) {
        const errorMessage = (this.minutes) ? `(1-59)` : `(${this.strategy.getHourRange()})`;
        this.displayError = (invalid) ? errorMessage : '';
    }
    debounceErrors() {
        window.clearTimeout(this.errorsTimer);
        this.errorsTimer = window.setTimeout(() => {
            this.displayErrors(this.input.invalid);
        }, 100);
    }
    minuteChangedHandler(val) {
        this.anjMinuteChanged.emit(val);
    }
    hourChangedHandler(val) {
        this.anjHourChanged.emit(val);
    }
    selectInput() {
        const nativeInput = this.input.firstElementChild;
        if (this.element.firstElementChild.classList.contains('anj-focused')) {
            nativeInput.select();
        }
    }
    render() {
        return (h("anj-form-group", null,
            h("anj-label", null, this.label),
            h("anj-input", { ref: r => this.input = r, value: this.digits, pattern: this.regexPattern, placeholder: this.placeholderText, minlength: 1, maxlength: 2, type: "text" }),
            h("anj-form-error", null, this.displayError)));
    }
    static get is() { return "anj-time-picker-input"; }
    static get properties() { return {
        "minutes": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "minutes",
            "reflect": false,
            "defaultValue": "false"
        },
        "strategy": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "TimeDisplay",
                "resolved": "TimeDisplay",
                "references": {
                    "TimeDisplay": {
                        "location": "import",
                        "path": "../time-picker.service"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "value": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        }
    }; }
    static get states() { return {
        "displayError": {}
    }; }
    static get events() { return [{
            "method": "anjHourChanged",
            "name": "anjHourChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "anjHourTab",
            "name": "anjHourTab",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "anjMinuteChanged",
            "name": "anjMinuteChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "focusNativeInput": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Allows input focus to be set from an external source\nTypically used when opening the picker to set the focus to the hour input",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "element"; }
    static get watchers() { return [{
            "propName": "strategy",
            "methodName": "strategyWatcher"
        }, {
            "propName": "value",
            "methodName": "valueHandler"
        }]; }
    static get listeners() { return [{
            "name": "anjBlur",
            "method": "onAnjBlur",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjInput",
            "method": "onAnjInput",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjFocus",
            "method": "onAnjFocus",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
