import { h, } from "@stencil/core";
import { isNestedInIfxComponent } from "../../shared/utils/dom-utils";
import { detectFramework } from "../../shared/utils/framework-detection";
import { trackComponent } from "../../shared/utils/tracking";
export class DatePicker {
    inputId = `ifx-date-picker-${++datePickerId}`;
    el;
    /**
     * Size of the date picker input
     */
    size = "s";
    /**
     * Error state of the date picker
     */
    error = false;
    /**
     * Success state of the date picker
     */
    success = false;
    /**
     * Whether the date picker is disabled
     */
    disabled = false;
    /**
     * Aria label for the date picker input
     */
    ariaLabelText;
    /**
     * The value of the date picker
     */
    value;
    /**
     * Type of date input (date, datetime-local, etc.)
     */
    type = "date";
    /**
     * Maximum allowed date
     */
    max;
    /**
     * Minimum allowed date
     */
    min;
    /**
     * Whether the date picker is required
     */
    required = false;
    /**
     * Label text for the date picker
     */
    label;
    /**
     * Caption text displayed below the date picker
     */
    caption;
    /**
     * Autocomplete attribute for the input
     */
    autocomplete = "on";
    /**
     * Internal state to manage the current value
     */
    internalValue;
    internals;
    /**
     * Event emitted when date value changes
     */
    ifxDate;
    handleValueChange(newValue) {
        this.internalValue = newValue;
    }
    /**
     * Clears the date picker value
     */
    async clear() {
        this.internalValue = "";
        const input = this.getInput();
        if (input) {
            input.classList.remove("has-value");
        }
        if (this.type === "datetime-local") {
            this.ifxDate.emit({
                day: null,
                month: null,
                year: null,
                hours: null,
                minutes: null,
            });
        }
        else {
            this.ifxDate.emit({ day: null, month: null, year: null });
        }
    }
    getInput() {
        const input = this.el.shadowRoot.querySelector(".date__picker-input");
        return input;
    }
    getDate(e) {
        const inputValue = e.target.value;
        this.internalValue = inputValue;
        const selectedDate = new Date(inputValue);
        const day = selectedDate.getDate();
        const month = selectedDate.getMonth() + 1;
        const year = selectedDate.getFullYear();
        if (!inputValue) {
            //this.internals.setFormValue(null);
            if (this.type === "datetime-local") {
                const hours = selectedDate.getHours();
                const minutes = selectedDate.getMinutes();
                this.ifxDate.emit({ day, month, year, hours, minutes });
            }
            else {
                this.ifxDate.emit({ day, month, year });
            }
            return;
        }
        const input = this.getInput();
        input.classList.add("has-value");
        //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))
        if (this.type === "datetime-local") {
            const hours = selectedDate.getHours();
            const minutes = selectedDate.getMinutes();
            this.ifxDate.emit({ day, month, year, hours, minutes });
        }
        else {
            this.ifxDate.emit({ day, month, year });
        }
    }
    handleIconKeyDown(e) {
        if (this.disabled)
            return;
        const browserIsFirefox = this.isFirefox();
        const input = this.getInput();
        if (e.key === "Enter" && browserIsFirefox) {
            e.preventDefault();
            if (input.showPicker) {
                input.showPicker();
            }
        }
    }
    isFirefox() {
        const isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
        return isFirefox;
    }
    setFireFoxClasses() {
        const browserIsFirefox = this.isFirefox();
        const input = this.getInput();
        const iconWrapper = this.el.shadowRoot.querySelector(".icon__wrapper");
        if (browserIsFirefox) {
            input.classList.add("firefox__classes");
            iconWrapper.classList.add("firefox__classes");
        }
        else if (input.classList.contains("firefox__classes")) {
            input.classList.remove("firefox__classes");
            iconWrapper.classList.remove("firefox__classes");
        }
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-date-picker", await framework);
        }
        this.setFireFoxClasses();
    }
    componentWillUpdate() {
        if (this.value) {
            this.getDate({ target: { value: this.value } });
        }
    }
    componentWillLoad() {
        this.internalValue = this.value;
    }
    // formResetCallback() {
    //   this.internals.setFormValue(null);
    // }
    render() {
        return (h("div", { key: 'ffcc3131fcf5b138e62fc4ebbb2c093b3a637410', class: `date__picker-container ${this.error ? "error" : ""} ${this.disabled ? "disabled" : ""}` }, h("label", { key: '665c92533e06c266831b6c22c23ffc49f5d99d65', class: "label__wrapper", htmlFor: this.inputId }, this.label?.trim(), h("span", { key: 'b8d7088e30fd2070ec3bd4fa55790200e625ae73', class: `asterisk ${this.required ? "required" : ""} ${this.error ? "error" : ""}` }, "*")), h("div", { key: '13fd38359d2269903130224257d125921f69e5cf', class: `input__wrapper ${this.size === "l" ? "large" : "small"} ${this.disabled ? "disabled" : ""}` }, h("input", { key: '1d77116eb7e256f86d8ab57a257e8587a90e2ac7', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? "error" : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabelText, max: this.max, min: this.min, value: this.internalValue, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'cdd2499ae7762527de6de00ed765215d1952331a', class: "icon__wrapper", tabIndex: this.isFirefox() ? 0 : undefined, onKeyDown: (e) => this.handleIconKeyDown(e) }, h("ifx-icon", { key: '982c04157c225b9255c924fb8c85e9ded36f2859', icon: "calendar16", "aria-hidden": "true" }))), this.caption?.trim() && (h("div", { key: '376b9e498da450bfce483820497c6e8545b8134d', class: "caption__wrapper" }, this.caption.trim()))));
    }
    static get is() { return "ifx-date-picker"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["date-picker.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["date-picker.css"]
        };
    }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size of the date picker input"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "\"s\""
            },
            "error": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Error state of the date picker"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error",
                "defaultValue": "false"
            },
            "success": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Success state of the date picker"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "success",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether the date picker is disabled"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "ariaLabelText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Aria label for the date picker input"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-label-text"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the date picker"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Type of date input (date, datetime-local, etc.)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "\"date\""
            },
            "max": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Maximum allowed date"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max"
            },
            "min": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Minimum allowed date"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "min"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether the date picker is required"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label text for the date picker"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "caption": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Caption text displayed below the date picker"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "caption"
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Autocomplete attribute for the input"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "autocomplete",
                "defaultValue": "\"on\""
            }
        };
    }
    static get states() {
        return {
            "internalValue": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxDate",
                "name": "ifxDate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted when date value changes"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "clear": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Clears the date picker value",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "handleValueChange"
            }];
    }
    static get attachInternalsMemberName() { return "internals"; }
}
let datePickerId = 0;
//# sourceMappingURL=date-picker.js.map
