'use strict';

var index = require('./index-BjHIBY-I.js');
var translations = require('./translations-Bu_0fli7.js');
var fileMetadata = require('./file-metadata-rQ0WzFlZ.js');
require('./get-icon-props-CwpDdQDI.js');

const fileCss = () => `@charset "UTF-8";:host(limel-file){position:relative}.drag-and-drop-tip{pointer-events:none;position:absolute;box-sizing:border-box;margin:0.25rem;inset:0;display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;border-radius:0.25rem;border:1px dashed rgb(var(--contrast-700));padding:0 0.5rem}.drag-and-drop-tip .invisible-label-mock{flex-shrink:0;opacity:0;padding-right:1rem;padding-left:1.5rem}.drag-and-drop-tip .tip{font-size:smaller;color:var(--limel-theme-text-secondary-on-background-color);height:auto;max-height:3rem;line-height:1;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}`;

const DEFAULT_FILE_CHIP = {
    id: null,
    text: null,
    removable: true,
};
const File = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.change = index.createEvent(this, "change");
        this.interact = index.createEvent(this, "interact");
        /**
         * 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 (index.h(index.Host, { key: '4b91f02cff596bca5da1a635ce24d2bb8a5154e1' }, index.h("limel-file-dropzone", { key: 'c3636964ee41bd5396fe667cc983a74256845af5', 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 (index.h("div", { class: "drag-and-drop-tip" }, index.h("span", { class: "invisible-label-mock", role: "presentation" }, this.label), index.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: fileMetadata.getFileIcon(this.value),
                    title: fileMetadata.getFileExtensionTitle(this.value),
                    color: fileMetadata.getFileColor(this.value),
                    backgroundColor: fileMetadata.getFileBackgroundColor(this.value),
                }, href: this.value.href, menuItems: this.value.menuItems }),
        ];
    }
    renderChipset() {
        const chipset = (index.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 (index.h("limel-file-input", { accept: this.accept, disabled: this.disabled || this.readonly }, chipset));
    }
    preventAndStop(event) {
        event.stopPropagation();
        event.preventDefault();
    }
    getTranslation(key) {
        return translations.translate.get(key, this.language);
    }
};
File.style = fileCss();

exports.limel_file = File;
