import { Host, h, Fragment } from "@stencil/core";
import i18next from "i18next";
export class EzpUpload {
    constructor() {
        /**
         *
         * States
         *
         */
        this.selectedFiles = [];
        this.dragging = false;
        /**
         *
         * Private methods
         *
         */
        this.handleInput = () => {
            const files = Array.from(this.input.files);
            // Add new files to existing selection instead of replacing
            this.selectedFiles = [...this.selectedFiles, ...files];
            this.uploadFile.emit(this.selectedFiles);
            // Reset the input so the same file can be selected again
            if (this.input) {
                this.input.value = '';
            }
        };
        this.removeFile = (event, index) => {
            event.preventDefault();
            event.stopPropagation();
            this.selectedFiles = this.selectedFiles.filter((_, i) => i !== index);
            this.uploadFile.emit(this.selectedFiles);
            // Reset the input so it's ready for new selections
            if (this.input) {
                this.input.value = '';
            }
        };
    }
    /**
     *
     * Listeners
     *
     */
    handleDragEnter() {
        this.dragging = true;
    }
    handleDragOver(event) {
        event.stopPropagation();
        event.preventDefault();
        event.dataTransfer.dropEffect = 'copy';
    }
    handleDragLeave() {
        this.dragging = false;
    }
    handleDrop(event) {
        event.stopPropagation();
        event.preventDefault();
        this.dragging = false;
        const files = Array.from(event.dataTransfer.files);
        // Add new files to existing selection instead of replacing
        this.selectedFiles = [...this.selectedFiles, ...files];
        this.uploadFile.emit(this.selectedFiles);
    }
    listenPrintCancel() {
        this.form.reset();
        this.selectedFiles = [];
    }
    /**
     *
     * Render method
     *
     */
    render() {
        return (h(Host, { key: '4711c053e354bac32778220913800e9ddbeea4ae', class: { dragging: this.dragging } }, h("form", { key: 'bc38c6da6d342dbec11724ada061a136ce5e8ec9', id: "form", ref: (form) => (this.form = form) }, h("div", { key: '7823a9d8b9687a3dd4614a6de2d8ce9ed9e105a9', id: "header" }, h("ezp-icon", { key: '0cfe322cd35d84ca5dd55d03c2e9f485d61c36fc', name: "drag-drop", size: "huge", framed: true }), h("ezp-label", { key: '54408d9e0b2bc3837dbda634c8f0d1980cd9ca13', weight: "strong", text: i18next.t('upload.description') }), h("div", { key: '2c205310172c020fff181af64aa2b2d01b8c14a3', id: "meta" }, h("ezp-label", { key: '5d66adb460bcaa82a0f2bdff02e4bef61c926471', level: "tertiary", text: i18next.t('upload.meta_leading') }), h("label", { key: 'eb84ebab2edf72fabab9c818d609a93a0dd531d5', htmlFor: "input", id: "select" }, h("ezp-label", { key: '8daed6c65c7ba63b741d958e824e2c5e5cdc402f', level: "tertiary", weight: "strong", text: i18next.t('upload.meta_select') })), h("input", { key: 'bdc526e6393100006423e1e7fe2eacc4c7ba1984', type: "file", name: "input", id: "input", multiple: true, ref: (input) => (this.input = input), onInput: this.handleInput }), h("ezp-label", { key: '7126b66e7fa542bb4566e1b2af1a03357da08cf3', level: "tertiary", text: i18next.t('upload.meta_trailing') })), this.selectedFiles.length > 0 && (h(Fragment, null, h("ezp-label", { key: 'e0334c3a4378db13dbcf755b79564b7ecbe3630e', level: "secondary", text: i18next.t('upload.selected_files') }), h("div", { key: 'aaa7963218870cd372b67b48d7e73945f39b062a', id: "file-list" }, this.selectedFiles.map((file, index) => (h("div", { key: index, class: "file-item" }, h("div", { class: "file-name" }, h("ezp-label", { level: "tertiary", text: file.name })), h("div", { class: "file-remove" }, h("ezp-icon-button", { icon: "close", type: "button", level: "tertiary", onClick: (event) => this.removeFile(event, index) }))))))))))));
    }
    static get is() { return "ezp-upload"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ezp-upload.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ezp-upload.css"]
        };
    }
    static get states() {
        return {
            "selectedFiles": {},
            "dragging": {}
        };
    }
    static get events() {
        return [{
                "method": "uploadFile",
                "name": "uploadFile",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\nEvents"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get listeners() {
        return [{
                "name": "dragenter",
                "method": "handleDragEnter",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "dragover",
                "method": "handleDragOver",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "dragleave",
                "method": "handleDragLeave",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "drop",
                "method": "handleDrop",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "printCancel",
                "method": "listenPrintCancel",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
