import { h } from "@stencil/core";
import { trackComponent } from "../../global/utils/tracking";
import { isNestedInIfxComponent } from "../../global/utils/dom-utils";
import { detectFramework } from "../../global/utils/framework-detection";
export class DatePicker {
    constructor() {
        this.inputId = `ifx-date-picker-${++datePickerId}`;
        this.size = 's';
        this.error = false;
        this.success = false;
        this.disabled = false;
        this.type = 'date';
        this.required = false;
        this.autocomplete = 'on';
    }
    getDate(e) {
        const inputValue = e.target.value;
        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.el.shadowRoot.querySelector('.date__picker-input');
        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 });
        }
    }
    handleInputFocusOnIconClick() {
        const input = this.el.shadowRoot.querySelector('.date__picker-input');
        if (input) {
            input.focus();
        }
    }
    getBrowser() {
        if (navigator.userAgent.indexOf("Chrome") != -1) {
            return "Chrome";
        }
        else if (navigator.userAgent.indexOf("Opera") != -1) {
            return "Opera";
        }
        else if (navigator.userAgent.indexOf("MSIE") != -1) {
            return "IE";
        }
        else if (navigator.userAgent.indexOf("Firefox") != -1) {
            return "Firefox";
        }
        else {
            return "unknown";
        }
    }
    setFireFoxClasses() {
        const browser = this.getBrowser();
        const input = this.el.shadowRoot.querySelector('.date__picker-input');
        if (browser === 'Firefox') {
            input.classList.add('firefox__classes');
        }
        else if (input.classList.contains('firefox__classes')) {
            input.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 } });
        }
    }
    // formResetCallback() {
    //   this.internals.setFormValue(null);
    // }
    render() {
        var _a, _b;
        return (h("div", { key: 'dbb6f430496fefe886885ab005652d412bd30ebf', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '1c2a66b095a48206cf2c9931452964ac7d87dc59', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
            _a.trim(), h("span", { key: '0a754b66e239bae671a8c74ce2e0aa7ad5d47bcf', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '03eedd8172d239cc9bc7ed75a125e2d8213dce5c', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '1ed8fb51d42502d703e564e53624b70e45334842', 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.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'f1a55aa2e7ad2c9801b6a04a9a93d5b83fc63dac', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: 'e8109be168cf4e584350b2fe8cf98a908521eecd', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'df37c5fb29c31594720e7e112e18cdbce996942f', 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",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'s'"
            },
            "error": {
                "type": "boolean",
                "attribute": "error",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "success": {
                "type": "boolean",
                "attribute": "success",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "ariaLabel": {
                "type": "string",
                "attribute": "aria-label",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "value": {
                "type": "string",
                "attribute": "value",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "type": {
                "type": "string",
                "attribute": "type",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'date'"
            },
            "max": {
                "type": "string",
                "attribute": "max",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "min": {
                "type": "string",
                "attribute": "min",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "required": {
                "type": "boolean",
                "attribute": "required",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "attribute": "label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "caption": {
                "type": "string",
                "attribute": "caption",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "autocomplete": {
                "type": "string",
                "attribute": "autocomplete",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'on'"
            }
        };
    }
    static get events() {
        return [{
                "method": "ifxDate",
                "name": "ifxDate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get attachInternalsMemberName() { return "internals"; }
}
let datePickerId = 0;
//# sourceMappingURL=date-picker.js.map
