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.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: 'b20f4f23b16e63c07ef6bc5c3572b791140eba44', "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,
            }) }, h("div", { key: '044c61bf7af988883036fd242770e91f3710dc6c', class: "indicator" }, h("slot", { key: 'f3d0216b99fbd8c62242ce603109018f12f9d531', name: "indicator" })), h("div", { key: 'f840bdac4b57be631a024dfca6178b66a1f1fdb3', class: "separator" }), h("div", { key: 'f05d5335d962497d81df17573e9d9f643a1b8d89', class: "wrap" }, this.label && h("label", { key: '97653e8091db40c9c0955c25a4cb0950df2af641', htmlFor: this.inputId }, this.label), h("div", { key: '83a2bfac1e49c54b5846ab6060e07bd7c3e52702' }, (!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || this.multiple) && h("div", { key: '7394cf70c2acccaaa2c603d60df3625409da4320', class: "placeholder" }, h("span", { key: 'acc7f639849676a09d47ad5685ea8379c5ae9f9a' }, (_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: 'f9f4039a17d2975bae416d7739d25b07c067306d' })), h("input", { key: '431b62b0bdacd03446fba0175230b873ffe8726b', 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: 'd5c24485bab632060593d154319fb2a845fb7df2', class: cls({ "field-float-components": this.multiple, "field-components": !this.multiple }) }, this.loading && h("div", { key: '1749449f66e99f8990cbdf875352f7c845a8b03c', class: "loading-indicator" }), !this.multiple && !!((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) && h("span", { key: '8b1771ab8d5adaf6387cf61d7b06ae1d141dc868', class: "size" }, prefixFileSize(this.value[0].size)), h("div", { key: '77b9e41477d5118edbd0d5ec18f4f7b215087dbc', class: "buttons" }, h("x-button", { key: 'b83e7c966fade3fbb4ac83882f09b8fb1e8893b4', icon: "upload", class: "upload-button" }), h("slot", { key: 'cfaf94f84d5a88cf29204dbf6a8ec6e81aeaf072', name: "buttons" })), this.info && h("div", { key: '8c76405f0561fef83f02934e214dd0332a853c64', class: "info" }, h("x-tooltip", { key: 'aee0bef7f7269913fb5cd5aa6c78a6c76a45ffcb', content: this.info }, h("x-icon", { key: '279cc3b3cf491e8e7615bab89c87ae1b1a4b6ec6', 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
            },
            "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"; }
}
