import { h } from "@stencil/core";
import FileUpload from "@ecl/file-upload";
export class EclFileUpload {
    constructor() {
        this.inputId = `ecl-file-upload-${Math.random().toString(36).slice(2, 10)}`;
        this.noScript = false;
        this.disabled = false;
        this.required = false;
        this.invalid = false;
        this.width = 'm';
        this.multiple = false;
    }
    getClass() {
        const styleClasses = ['ecl-input', this.styleClass];
        return styleClasses.join(' ');
    }
    getInputClasses() {
        const inputClasses = ['ecl-file-upload'];
        if (this.inputClass) {
            inputClasses.push(this.inputClass);
        }
        return inputClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidLoad() {
        if (!this.noScript) {
            ;
            window.ECL = window.ECL || {};
            ECL.FileUpload = FileUpload;
            const fileUpload = new FileUpload(this.el.firstElementChild);
            fileUpload.init();
            // @ts-ignore
            const observer = new MutationObserver((mutationsList, observer) => {
                for (const mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        const nodes = mutation.addedNodes;
                        nodes.forEach(node => {
                            const htmlNode = node;
                            htmlNode.classList.add(`sc-ecl-file-upload-${this.theme}`);
                            const name = htmlNode.querySelector('.ecl-file-upload__item-name');
                            if (name) {
                                name.classList.add(`sc-ecl-file-upload-${this.theme}`);
                            }
                            const meta = htmlNode.querySelector('.ecl-file-upload__item-meta');
                            if (meta) {
                                meta.classList.add(`sc-ecl-file-upload-${this.theme}`);
                            }
                        });
                    }
                }
            });
            observer.observe(this.el.querySelector('.ecl-file-upload__list'), {
                attributes: true,
                childList: true,
                subtree: true,
            });
        }
    }
    render() {
        const wrapperAttrs = {};
        wrapperAttrs['data-ecl-file-upload-group'] = true;
        const attributes = {
            class: this.getInputClasses(),
            type: this.type,
            id: this.inputId,
            name: this.name,
            required: this.required,
            disabled: this.disabled,
            placeholder: this.placeholder,
            'data-ecl-file-upload-input': true,
            multiple: this.multiple,
            value: this.defaultValue,
        };
        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: '7ac45ecfba065e0469c091b15694b3838ce63fd1', class: this.getClass() }, wrapperAttrs), h("input", Object.assign({ key: '76e4bfa3e0010c5bab2622dffb35852871e125bd' }, attributes)), h("label", { key: 'b96ea927b7ad63753aba91a854c5750e7604dcf7', class: "ecl-file-upload__button-container", htmlFor: this.inputId }, h("span", { key: 'bc3a8e798b131b5ce33a3eb07cb4eff89682ac66', class: "ecl-file-upload__button ecl-button ecl-button--primary", "data-ecl-file-upload-button": true, "data-ecl-file-upload-label-choose": this.buttonChooseLabel, "data-ecl-file-upload-label-replace": this.buttonReplaceLabel }, this.buttonChooseLabel)), h("ul", { key: '6b5bf8bc019709182671d0570ee0e0dc779c43dc', class: "ecl-file-upload__list", "data-ecl-file-upload-list": true })));
    }
    static get is() { return "ecl-file-upload"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-file-upload-ec.css"],
            "eu": ["./build/styles/ecl-file-upload-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-file-upload-ec.css"],
            "eu": ["build/styles/ecl-file-upload-eu.css"]
        };
    }
    static get properties() {
        return {
            "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-file-upload-${Math.random().toString(36).slice(2, 10)}`"
            },
            "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"
            },
            "inputClass": {
                "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-class"
            },
            "noScript": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-script",
                "defaultValue": "false"
            },
            "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"
            },
            "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"
            },
            "helperId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helper-id"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helper-text"
            },
            "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"
            },
            "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'"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type"
            },
            "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"
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiple",
                "defaultValue": "false"
            },
            "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"
            },
            "buttonChooseLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "button-choose-label"
            },
            "buttonReplaceLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "button-replace-label"
            }
        };
    }
    static get elementRef() { return "el"; }
}
