import { h } from "@stencil/core";
import getAssetPath from "../../utils/assetPath";
export class EclDatepicker {
    constructor() {
        this.theme = 'ec';
        this.styleClass = undefined;
        this.disabled = false;
        this.required = false;
        this.placeholder = 'DD-MM-YYYY';
        this.inputId = undefined;
        this.invalid = false;
        this.type = undefined;
        this.name = undefined;
        this.defaultValue = undefined;
        this.dateFormat = 'DD-MM-YYYY';
        this.yearRange = 40;
    }
    handleChange(event) {
        const newValue = event.target.value;
        this.valueChanged.emit(newValue);
    }
    handleFocus() {
        this.focused.emit();
    }
    handleBlur() {
        this.blurred.emit();
    }
    getClass() {
        const styleClasses = ['ecl-datepicker', this.styleClass];
        if (this.invalid) {
            styleClasses.push('ecl-datepicker--invalid');
        }
        if (this.disabled) {
            styleClasses.push('ecl-datepicker--disabled');
        }
        return styleClasses.join(' ');
    }
    componentDidRender() {
        if (this.inputId) {
            const group = this.el.closest('.ecl-form-group');
            if (group) {
                const label = group.querySelector('.ecl-form-label');
                if (label) {
                    label.setAttribute('for', this.inputId);
                    label.setAttribute('id', `${this.inputId}-label`);
                }
                const helper = group.querySelector('.ecl-help-block');
                if (helper) {
                    helper.setAttribute('id', `${this.inputId}-helper`);
                }
            }
        }
        const momentSrc = 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js';
        if (document.querySelector(`script[src="${momentSrc}"]`)) {
            document.querySelector(`script[src="${momentSrc}"]`).remove();
        }
        const moment = document.createElement('script');
        moment.setAttribute('integrity', 'sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=');
        moment.setAttribute('crossorigin', 'anonymous');
        moment.src = momentSrc;
        moment.onload = () => {
            const src = getAssetPath('./build/scripts/ecl-datepicker-vanilla.js');
            if (document.querySelector(`script[src="${src}"]`)) {
                document.querySelector(`script[src="${src}"]`).remove();
            }
            const script = document.createElement('script');
            script.src = src;
            script.defer = true;
            script.onload = () => {
                const datepicker = new ECL.Datepicker(this.el.querySelector('.ecl-datepicker__field'), { format: this.dateFormat, yearRange: Number(this.yearRange) });
                datepicker.init();
            };
            document.body.appendChild(script);
        };
        document.body.appendChild(moment);
    }
    render() {
        return (h("div", { class: this.getClass() }, h("input", { class: `ecl-datepicker__field ecl-text-input sc-ecl-text-input-${this.theme} ecl-text-input--s ${this.invalid ? 'ecl-text-input--invalid' : ''}`, autocomplete: "off", "data-ecl-datepicker-toggle": true, id: this.inputId, value: this.defaultValue, required: this.required, disabled: this.disabled, placeholder: this.placeholder, onChange: event => this.handleChange(event), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), h("ecl-icon", { theme: this.theme, styleClass: `ecl-datepicker__icon sc-ecl-datepicker-${this.theme}`, icon: "calendar", size: "s" })));
    }
    static get is() { return "ecl-datepicker"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-datepicker-ec.css"],
            "eu": ["./build/styles/ecl-datepicker-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-datepicker-ec.css"],
            "eu": ["build/styles/ecl-datepicker-eu.css"]
        };
    }
    static get properties() {
        return {
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "'ec'"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "style-class",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "'DD-MM-YYYY'"
            },
            "inputId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "input-id",
                "reflect": false
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "invalid",
                "reflect": false,
                "defaultValue": "false"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "type",
                "reflect": false
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "name",
                "reflect": false
            },
            "defaultValue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "default-value",
                "reflect": false
            },
            "dateFormat": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "date-format",
                "reflect": false,
                "defaultValue": "'DD-MM-YYYY'"
            },
            "yearRange": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "year-range",
                "reflect": false,
                "defaultValue": "40"
            }
        };
    }
    static get events() {
        return [{
                "method": "valueChanged",
                "name": "valueChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "focused",
                "name": "focused",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "blurred",
                "name": "blurred",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=ecl-datepicker.js.map
