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: '362ed787b4e3fc3e754718ae898b8cfa12333565', "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: 'f05655122bd5fa3ac4495a48ddfcc8cb73d1ec72', class: "indicator" }, h("slot", { key: '57d1994604a651ecf30903e0c20aad72398a9092', name: "indicator" })), h("div", { key: 'd329d90ab5736c127f3b527c3f9480854d04db01', class: "separator" }), h("div", { key: 'd5dc6146b42d4316985f28cfe082047c17a9d0a1', class: "wrap" }, this.label && h("label", { key: 'f967a5b428910b2b27dfa0f353b32d589c344e41', htmlFor: this.inputId }, this.label), h("div", { key: '679c83867817ae9129908cc1c300165295242ed2' }, (!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || this.multiple) && h("div", { key: 'b346924ee18fa5635d32bbf2112ca3d2d4d4e95a', class: "placeholder" }, h("span", { key: '525a4a9f562cc2bbad4aeb08f0ec565d49dd267d' }, (_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: 'e5eb67a47bd5a59ac9cf5077bba9b2b0c799e649' })), h("input", { key: '8204c2c76e758a58bd618dae564f9f2d81711791', 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: '5eab83daa21d826ff945569d9b583db1a3012bd8', class: cls({ "field-float-components": this.multiple, "field-components": !this.multiple }) }, this.loading && h("div", { key: '06a967402cd5ed1638b52ff5b2e96f5ed24adce1', class: "loading-indicator" }), !this.multiple && !!((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) && h("span", { key: '497684e21091b694125f8899aab458876e811dd7', class: "size" }, prefixFileSize(this.value[0].size)), h("div", { key: '521846b97255256f145f7fa7d25e6b3b0fa90726', class: "buttons" }, h("x-button", { key: '8af009b24ed2a56b08c680b085066bd2b0817bc9', icon: "upload", class: "upload-button" }), h("slot", { key: '460836b4e80f3328abe100278e7eae789c5a1004', name: "buttons" })), this.info && h("div", { key: 'd33e3508ef2988e7599bfa6b8575e7e57451d99c', class: "info" }, h("x-tooltip", { key: '4f757b475ee31503ba02f65ffdc49654e0d4caa1', content: this.info }, h("x-icon", { key: '940deca8fd88737e2c098f81322aec469860dbc2', 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"; }
}
