import { h } from "@stencil/core";
import Datepicker from "@ecl/datepicker";
export class EclDatepicker {
    constructor() {
        this.disabled = false;
        this.required = false;
        this.placeholder = 'DD-MM-YYYY';
        this.inputId = `ecl-datepicker-${Math.random().toString(36).slice(2, 10)}`;
        this.invalid = false;
        this.firstDayOfTheWeek = 1;
        this.width = 'm';
        this.min = '';
        this.max = '';
        this.name = this.inputId;
    }
    handleChange(event) {
        const newValue = event.target.value;
        this.valueChanged.emit(newValue);
    }
    handleFocus() {
        this.focused.emit();
    }
    handleBlur() {
        this.blurred.emit();
    }
    getClass() {
        const styleClasses = [
            'ecl-datepicker',
            `ecl-datepicker--${this.width}`,
            this.styleClass
        ];
        if (this.invalid) {
            styleClasses.push('ecl-datepicker--invalid');
        }
        if (this.disabled) {
            styleClasses.push('ecl-datepicker--disabled');
        }
        return styleClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidLoad() {
        const duetSrc = 'https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.esm.js';
        if (document.querySelector(`script[src="${duetSrc}"]`)) {
            document.querySelector(`script[src="${duetSrc}"]`).remove();
        }
        const duet = document.createElement('script');
        duet.setAttribute('type', 'module');
        duet.src = duetSrc;
        duet.onload = () => {
            ;
            window.ECL = window.ECL || {};
            ECL.Datepicker = Datepicker;
            const datepicker = new Datepicker(this.el.querySelector('.ecl-datepicker'));
            datepicker.init();
        };
        document.body.appendChild(duet);
    }
    render() {
        const attributes = {};
        if (this.invalid) {
            attributes['invalid'] = true;
        }
        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`);
                    attributes['aria-describedby'] = `${this.inputId}-helper`;
                }
            }
        }
        return (h("div", Object.assign({ key: 'fdb7c503134d140d7e8ae996be0a75cc0aa08320', class: this.getClass(), "data-ecl-datepicker-toggle": true, "data-placeholder": this.placeholder, "data-value": this.defaultValue }, attributes), h("duet-date-picker", { key: '0ad940a76d9d200d047a846ca3dc316fd86d7ac1', identifier: this.inputId, name: this.name, required: this.required, disabled: this.disabled, "first-day-of-the-week": this.firstDayOfTheWeek, min: this.min, max: this.max })));
    }
    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": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "style-class"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder",
                "defaultValue": "'DD-MM-YYYY'"
            },
            "inputId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "input-id",
                "defaultValue": "`ecl-datepicker-${Math.random().toString(36).slice(2, 10)}`"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "firstDayOfTheWeek": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "first-day-of-the-week",
                "defaultValue": "1"
            },
            "width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "width",
                "defaultValue": "'m'"
            },
            "min": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "min",
                "defaultValue": "''"
            },
            "max": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max",
                "defaultValue": "''"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name",
                "defaultValue": "this.inputId"
            },
            "defaultValue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "default-value"
            }
        };
    }
    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"; }
}
