import { Host, h } from "@stencil/core";
import { Lang } from "../../services/lang";
import { cls, getId, isEmpty, prefixFileSize } from "../../utils/helpers";
export class XInputFile {
    constructor() {
        /**
         * Element ID for internal reference
         */
        this.inputId = getId('file');
        this.label = undefined;
        this.name = undefined;
        this.placeholder = undefined;
        this.accept = undefined;
        this.capture = undefined;
        this.info = undefined;
        this.maxsize = undefined;
        this.width = undefined;
        this.multiple = undefined;
        this.required = undefined;
        this.loading = undefined;
        this.disabled = undefined;
        this.value = null;
        this.isValid = true;
        this.isFocused = undefined;
        this.isLoading = undefined;
        this.isDisabled = undefined;
    }
    /**
     * On value attribute change
     *
     * @param value
     */
    watchValue(value) {
        var _a, _b;
        if (this.multiple) {
            if (!((_a = this.name) === null || _a === void 0 ? void 0 : _a.length)) {
                return;
            }
            const data = new FormData();
            this.value.forEach((value) => {
                data.append(this.name, value);
            });
            this.internals.setFormValue(data);
        }
        else {
            this.internals.setFormValue(value);
        }
        this.el.dispatchEvent(new InputEvent('change', { bubbles: false }));
        this.el.dispatchEvent(new InputEvent('input', { bubbles: false }));
        this.formValidateCallback(true);
        (_b = this.internals.form) === null || _b === void 0 ? void 0 : _b.dispatchEvent(new InputEvent('input', { bubbles: false }));
    }
    /**
     * This is called when the 'disabled' attribute of the element or or an ancestor <fieldset> is updated
     *
     * @param disabled
     */
    formDisabledCallback(disabled) {
        this.isDisabled = disabled;
    }
    /**
     * This is called when the parent/owner form is reset
     */
    formResetCallback() {
        this.isValid = true;
        this.value = null;
    }
    /**
     * This is called when the input is validated
     */
    formValidateCallback(dispatchValidation) {
        if (this.required && isEmpty(this.value)) {
            this.internals.setValidity({ valueMissing: true }, Lang.get('fields.validation.value-missing'));
        }
        else if (this.maxsize && !isEmpty(this.value) && !!this.value.filter(file => file.size > this.maxsize).length) {
            this.internals.setValidity({ customError: true }, Lang.get('fields.validation.file-too-large', { size: prefixFileSize(this.maxsize) }));
        }
        else {
            this.internals.setValidity({});
        }
        if (dispatchValidation) {
            this.isValid = this.internals.validity.valid;
            this.onValidateInputEvent.emit(this.internals);
        }
    }
    /**
     * This is called on component before load
     */
    componentWillLoad() {
        // 
    }
    /**
     * This is called on component did load
     */
    componentDidLoad() {
        // 
    }
    /**
     * show an icon by the mime file type
     */
    getFileIconByType(file) {
        const type = file.type;
        if (type.startsWith('image/')) {
            return 'file-image';
        }
        if (type.startsWith('video/')) {
            return 'file-video';
        }
        if (type === 'application/pdf' ||
            type === 'application/msword' ||
            type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
            type === 'application/vnd.ms-excel' ||
            type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
            type === 'application/vnd.ms-powerpoint' ||
            type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation' ||
            type === 'text/plain') {
            return 'file-document';
        }
        if (type === 'application/zip' ||
            type === 'application/x-7z-compressed' ||
            type === 'application/x-rar-compressed' ||
            type === 'application/x-tar' ||
            type === 'application/x-gtar') {
            return 'file-archive';
        }
        return 'file';
    }
    /**
     * This called on file is removed
     */
    onDeleteFile(file) {
        if (!this.value)
            return;
        this.value = this.value.filter(f => f !== file);
    }
    /**
     * This called on input field is changed
     */
    onChangeInput() {
        var _a;
        this.value = Array.from((_a = this.input) === null || _a === void 0 ? void 0 : _a.files);
    }
    /**
     * This called on input field is unfocused
     */
    onBlurInput() {
        this.isFocused = false;
        setTimeout(() => this.formValidateCallback(true), 50);
    }
    /**
     * This called on input field is focused
     */
    onFocusInput() {
        this.isFocused = true;
    }
    /**
     * Render component
     */
    render() {
        var _a, _b, _c, _d;
        return (h(Host, { key: '7e3474e7238c81f1eb08baf5204d1bb27741e719', "data-for": this.name, class: cls({
                "input-container": true,
                "focus": this.isFocused,
                "loading": this.loading || this.isLoading,
                "disabled": this.isDisabled,
                "invalid": !this.isValid,
                "required": this.required,
                "multiple": this.multiple,
            }), style: { maxWidth: this.width } }, h("div", { key: 'd1192c909d1cb9431a200ea348cece8b8765a02b', class: "indicator" }, h("slot", { key: 'b696f9489e60e18a0d80dbb75fcbe112e826248c', name: "indicator" })), h("div", { key: '1887dd5d0bcea8fc9709cbf498e3497f45802172', class: "separator" }), h("div", { key: '80f3f62e91067d8507808800eca1018d12c593a1', class: "wrap" }, this.label && h("label", { key: '750efe3b71a34e9bae121c8f9306d6cc36137d12', htmlFor: this.inputId }, this.label), h("div", { key: '6e069f63a36390295b9f3ed3bd39ba70f492382a' }, (!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || this.multiple) && h("div", { key: '772598540f2b7d727f7883150a318e3883bff5da', class: "placeholder" }, h("span", { key: 'bd6d908dd6752d451b8508d8022eb1cd4e20b5a9' }, (_b = this.placeholder) !== null && _b !== void 0 ? _b : Lang.get('fields.upload-file'))), !!((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) && this.value.map((file, index) => h("div", { class: cls('file', { first: index == 0 }) }, h("span", { class: "name" }, h("x-icon", { name: this.getFileIconByType(file) }), " ", file.name), this.multiple && h("span", { class: "size" }, prefixFileSize(file.size)), this.multiple && h("button", { onClick: () => this.onDeleteFile(file) }, h("x-icon", { name: "trash", size: "1.5rem", color: "danger", clickable: true }))))), h("slot", { key: '3ee0cecd9a363e2c69cc2c3b2ecdcd76e669400c' })), h("input", { key: 'cb5a550e3df27d12559ebbbdc53baca6c14a6d74', ref: el => this.input = el, id: this.inputId, type: "file", required: this.required, disabled: this.isDisabled || this.loading || this.isLoading, placeholder: this.placeholder, accept: this.accept, capture: this.capture, multiple: this.multiple, onChange: () => this.onChangeInput(), onBlur: () => this.onBlurInput(), onFocus: () => this.onFocusInput() }), h("div", { key: 'bdb203ba2cef45d30a907d81a70b31ea7d435291', class: cls({ "field-float-components": this.multiple, "field-components": !this.multiple }) }, this.loading && h("div", { key: '7e61b606a9c0a4e2a0f831cc6be52d228b98c673', class: "loading-indicator" }), !this.multiple && !!((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) && h("span", { key: '6328a63c523942a0356c821b8da965358c5a0988', class: "size" }, prefixFileSize(this.value[0].size)), h("div", { key: 'b2a1899a959cda3038bead2e87816a8a306fee5d', class: "buttons" }, h("x-button", { key: 'b871f0b9add872b8187d309e0cb0f07385dcba4c', icon: "upload", class: "upload-button" }), h("slot", { key: 'ff65ce357bf3f0d16352f0c534a0b9715301c962', name: "buttons" })), this.info && h("div", { key: '47052d41b4a12f19dbfca0741916991fedc3242f', class: "info" }, h("x-tooltip", { key: '1931fbd2b6ea6bc92e5c621e242ec442c4878463', content: this.info }, h("x-icon", { key: 'b0afed7f8483998519e97335fd01dc109faa0659', name: "info" }))))));
    }
    static get is() { return "x-input-file"; }
    static get formAssociated() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element input label text"
                },
                "attribute": "label",
                "reflect": false
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element input name for forms keys"
                },
                "attribute": "name",
                "reflect": false
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element input placeholder text"
                },
                "attribute": "placeholder",
                "reflect": false
            },
            "accept": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element expected file type in file upload controls"
                },
                "attribute": "accept",
                "reflect": false
            },
            "capture": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element media capture input method in file upload controls"
                },
                "attribute": "capture",
                "reflect": false
            },
            "info": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element input information block"
                },
                "attribute": "info",
                "reflect": false
            },
            "maxsize": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element input maximun file size"
                },
                "attribute": "maxsize",
                "reflect": false
            },
            "width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element input width"
                },
                "attribute": "width",
                "reflect": false
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element input file allows the user to select more than one file"
                },
                "attribute": "multiple",
                "reflect": false
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element input required for forms validations"
                },
                "attribute": "required",
                "reflect": false
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element show loading and block for edit"
                },
                "attribute": "loading",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element disabled state"
                },
                "attribute": "disabled",
                "reflect": false
            },
            "value": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "Array<File> | null",
                    "resolved": "File[]",
                    "references": {
                        "Array": {
                            "location": "global",
                            "id": "global::Array"
                        },
                        "File": {
                            "location": "global",
                            "id": "global::File"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element input value"
                },
                "defaultValue": "null"
            }
        };
    }
    static get states() {
        return {
            "isValid": {},
            "isFocused": {},
            "isLoading": {},
            "isDisabled": {}
        };
    }
    static get events() {
        return [{
                "method": "onValidateInputEvent",
                "name": "validated",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On validate input event"
                },
                "complexType": {
                    "original": "ElementInternals",
                    "resolved": "ElementInternals",
                    "references": {
                        "ElementInternals": {
                            "location": "global",
                            "id": "global::ElementInternals"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "watchValue"
            }];
    }
    static get attachInternalsMemberName() { return "internals"; }
}
