import { h, Host, } from "@stencil/core";
import { createRandomString } from "../../util/random-string";
import { createFileInfo } from "../../util/files";
/**
 * This component enables you to seamlessly transform any other clickable component that
 * generates a `click` event into a file input selector.
 *
 * To use it, just wrap any clickable component inside the `limel-file-input` component.
 * Upon reception of the `click` event this component will open the native file selection
 * dialog.
 *
 * After receiving the files, the component emits a `filesSelected` event.
 *
 * The event detail would be an array of `FileInfo` objects,
 * each representing a file dropped into the dropzone.
 *
 * @exampleComponent limel-example-file-input-basic
 * @exampleComponent limel-example-file-input-type-filtering
 * @private
 */
export class FileInput {
    constructor() {
        /**
         * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.
         *
         * For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.
         * Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`.
         * A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or
         * `.png, .jpg, .jpeg`.
         *
         * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more
         * details.
         */
        this.accept = '*';
        /**
         * Set to `true` to disable file input selection.
         */
        this.disabled = false;
        /**
         * Set to `true` to enable selection of multiple files
         */
        this.multiple = false;
        this.fileInputId = createRandomString();
        this.handleClick = (event) => {
            if (this.disabled) {
                event.stopPropagation();
                event.preventDefault();
                return;
            }
            this.triggerFileDialog();
            event.stopPropagation();
        };
        this.handleKeyUp = (event) => {
            event.stopPropagation();
            event.preventDefault();
            if (event.code === 'Enter') {
                this.triggerFileDialog();
            }
        };
        this.handleFileChange = (event) => {
            const files = [...this.fileInput.files];
            if (files.length > 0) {
                event.stopPropagation();
                this.filesSelected.emit(files.map(createFileInfo));
                this.fileInput.value = '';
            }
        };
    }
    componentDidLoad() {
        // eslint-disable-next-line unicorn/prefer-query-selector
        this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
    }
    render() {
        return (h(Host, { key: '62d72f49b1a71bef9c5b91c36f34f763a04d78e2', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: '72272f710f8ffb09eec2ace7409ab516ec4f80bd', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: '7ecff23ba41d76a23a2b8a542f56044615cb8b24' })));
    }
    handleKeyDown(event) {
        if (event.code === 'Tab' ||
            event.code === 'Backspace' ||
            event.code === 'Enter') {
            return;
        }
        event.preventDefault();
        event.stopPropagation();
    }
    triggerFileDialog() {
        this.fileInput.click();
    }
    static get is() { return "limel-file-input"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "accept": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "see",
                            "text": "[HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more\ndetails."
                        }],
                    "text": "Specifies the types of files that the dropzone will accept. By default, all file types are accepted.\n\nFor media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.\nUnique file type specifiers can also be used, for example: `.jpg`, `.pdf`.\nA comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or\n`.png, .jpg, .jpeg`."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "accept",
                "defaultValue": "'*'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to disable file input selection."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to enable selection of multiple files"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "multiple",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "filesSelected",
                "name": "filesSelected",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when files are selected"
                },
                "complexType": {
                    "original": "FileInfo[]",
                    "resolved": "FileInfo[]",
                    "references": {
                        "FileInfo": {
                            "location": "import",
                            "path": "../../global/shared-types/file.types",
                            "id": "src/global/shared-types/file.types.ts::FileInfo",
                            "referenceLocation": "FileInfo"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "element"; }
}
