import translate from "../../global/translations";
import { h, Host } from "@stencil/core";
import { getFileBackgroundColor, getFileColor, getFileExtensionTitle, getFileIcon, } from "../../util/file-metadata";
const DEFAULT_FILE_CHIP = {
    id: null,
    text: null,
    removable: true,
};
/**
 * This component lets end-users select a *single* file from their device
 * storage. Regardless of the user's device or operating system, this component
 * opens up a file picker dialog that allows the user to choose a file.
 *
 * ## Using correct labels
 *
 * This file picker can be used in different contexts. The component's distinct
 * visual design including the upload icon hints end-users that this is not a
 * normal input field like other fields in the form for example.
 *
 * :::important
 * you need to use a descriptive `label` that clarifies the
 * functionality of the file picker, and/or provides users with clear
 * instructions.
 *
 * Depending on the context, you may need to avoid labels such as:
 * - File
 * - Document
 *
 * and instead consider using labels like:
 * - Attach a file
 * - Upload a file
 * - Choose a document
 * - Choose a file
 *
 * and similar phrases...
 * :::
 *
 * @exampleComponent limel-example-file
 * @exampleComponent limel-example-file-custom-icon
 * @exampleComponent limel-example-file-menu-items
 * @exampleComponent limel-example-file-accepted-types
 * @exampleComponent limel-example-file-composite
 */
export class File {
    constructor() {
        /**
         * Set to `true` to indicate that the field is required.
         */
        this.required = false;
        /**
         * True if the input should be disabled
         */
        this.disabled = false;
        /**
         * Set to `true` to disable adding and removing files, but allow interaction
         * with any already existing file.
         */
        this.readonly = false;
        /**
         * Set to `true` to indicate that the current value of the chosen file is
         * invalid.
         */
        this.invalid = false;
        /**
         * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
         */
        this.accept = '*';
        /**
         * Defines the localisation for translations.
         */
        this.language = 'en';
        this.dropZoneTip = () => {
            return this.getTranslation('file.drag-and-drop-tips');
        };
        this.handleNewFiles = (event) => {
            this.preventAndStop(event);
            this.change.emit(event.detail[0]);
        };
        this.handleChipSetChange = (event) => {
            event.stopPropagation();
            const file = event.detail.length === 0 ? event.detail[0] : null;
            if (!file) {
                this.change.emit(file);
            }
        };
        this.handleChipInteract = (event) => {
            this.preventAndStop(event);
            this.interact.emit(event.detail.id);
        };
    }
    render() {
        return (h(Host, { key: '2de03c65bb1c1aba3d2bb09717cc45f3ef618ebc' }, h("limel-file-dropzone", { key: '8cb9d8dcbbe0ca9b667bfea72992a11a25f73fdb', disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
    }
    renderDragAndDropTip() {
        if (this.value || this.disabled || this.readonly) {
            return;
        }
        return (h("div", { class: "drag-and-drop-tip" }, h("span", { class: "invisible-label-mock", role: "presentation" }, this.label), h("span", { class: "tip" }, this.dropZoneTip())));
    }
    getChipArray() {
        if (!this.value) {
            return [];
        }
        return [
            Object.assign(Object.assign({}, DEFAULT_FILE_CHIP), { text: this.value.filename, id: this.value.id, icon: {
                    name: getFileIcon(this.value),
                    title: getFileExtensionTitle(this.value),
                    color: getFileColor(this.value),
                    backgroundColor: getFileBackgroundColor(this.value),
                }, href: this.value.href, menuItems: this.value.menuItems }),
        ];
    }
    renderChipset() {
        const chipset = (h("limel-chip-set", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, leadingIcon: "upload_to_cloud", language: this.language, onChange: this.handleChipSetChange, onInteract: this.handleChipInteract, required: this.required, type: "input", value: this.getChipArray() }));
        if (this.value) {
            return chipset;
        }
        return (h("limel-file-input", { accept: this.accept, disabled: this.disabled || this.readonly }, chipset));
    }
    preventAndStop(event) {
        event.stopPropagation();
        event.preventDefault();
    }
    getTranslation(key) {
        return translate.get(key, this.language);
    }
    static get is() { return "limel-file"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["file.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["file.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "unknown",
                "mutable": false,
                "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"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The selected file."
                },
                "getter": false,
                "setter": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The input label."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "label"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to indicate that the field is required."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "required",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "True if the input should be disabled"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to disable adding and removing files, but allow interaction\nwith any already existing file."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "readonly",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to indicate that the current value of the chosen file is\ninvalid."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "accept": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "accept",
                "defaultValue": "'*'"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Languages",
                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
                    "references": {
                        "Languages": {
                            "location": "import",
                            "path": "../date-picker/date.types",
                            "id": "src/components/date-picker/date.types.ts::Languages",
                            "referenceLocation": "Languages"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the localisation for translations."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "language",
                "defaultValue": "'en'"
            }
        };
    }
    static get events() {
        return [{
                "method": "change",
                "name": "change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Dispatched when a file is selected/deselected"
                },
                "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"
                        }
                    }
                }
            }, {
                "method": "interact",
                "name": "interact",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Dispatched when clicking on a chip"
                },
                "complexType": {
                    "original": "number | string",
                    "resolved": "number | string",
                    "references": {}
                }
            }];
    }
}
