var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { UmbMediaDropzoneManager } from './media-dropzone.manager.js';
import { UmbInputDropzoneElement, UmbFileDropzoneItemStatus, UmbDropzoneSubmittedEvent, } from '../../dropzone/index.js';
import { css, customElement, property } from '../../../../external/lit/index.js';
/**
 * A dropzone for uploading files and folders as media items. It is hidden by default and will be shown when dragging files over the window.
 * @element umb-dropzone-media
 * @fires ProgressEvent When the progress of the upload changes.
 * @fires UmbDropzoneSubmittedEvent When the upload is submitted.
 * @fires UmbDropzoneChangeEvent When any upload changes.
 * @fires CustomEvent<'complete'> When all uploads are complete (deprecated: use {@link UmbDropzoneChangeEvent} instead).
 * @slot - The default slot.
 */
let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDropzoneElement {
    /**
     * Gets the current value of the uploaded items.
     * @returns {Array<UmbUploadableItem>} An array of uploadable items.
     */
    getItems() {
        return this._progressItems;
    }
    #dragCounter;
    // Event handlers as arrow functions to maintain consistent references
    #handleDragEnter;
    #handleDragOver;
    #handleDragLeave;
    #handleDrop;
    constructor() {
        super();
        this.parentUnique = null;
        this.#dragCounter = 0;
        // Event handlers as arrow functions to maintain consistent references
        this.#handleDragEnter = (e) => {
            if (this.disabled)
                return;
            // Normalize types for Safari
            const types = Array.from(e.dataTransfer?.types || []).map((t) => t.toLowerCase());
            if (!types.includes('files'))
                return;
            this.#dragCounter++;
            this.toggleAttribute('dragging', true);
            e.preventDefault();
        };
        this.#handleDragOver = (e) => {
            e.preventDefault();
        };
        this.#handleDragLeave = () => {
            if (this.disabled)
                return;
            this.#dragCounter--;
            if (this.#dragCounter <= 0) {
                this.toggleAttribute('dragging', false);
                this.#dragCounter = 0;
            }
        };
        this.#handleDrop = (event) => {
            event.preventDefault();
            if (this.disabled)
                return;
            this.#dragCounter = 0;
            this.toggleAttribute('dragging', false);
        };
        this._manager = new UmbMediaDropzoneManager(this);
        this.progressItems = () => this._manager.progressItems;
        this.progress = () => this._manager.progress;
        document.addEventListener('dragenter', this.#handleDragEnter);
        document.addEventListener('dragleave', this.#handleDragLeave);
        document.addEventListener('dragover', this.#handleDragOver);
        document.addEventListener('drop', this.#handleDrop);
        // TODO: Revisit this. I am not sure why it is needed to call these methods here when they are already called in the constructor of the parent class.
        // If we do not call them here, the observer will use the wrong instance of the dropzone manager (UmbDropZoneManager instead of UmbMediaDropzoneManager).
        this._observeProgress();
        this._observeProgressItems();
    }
    _observeProgressItems() {
        super._observeProgressItems();
        this.observe(this._manager.progressItems, (progressItems) => {
            const waiting = progressItems.find((item) => item.status === UmbFileDropzoneItemStatus.WAITING);
            if (progressItems.length && !waiting) {
                this.dispatchEvent(new CustomEvent('complete', { detail: progressItems }));
            }
        }, '_observeProgressItemsComplete');
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        document.removeEventListener('dragenter', this.#handleDragEnter);
        document.removeEventListener('dragleave', this.#handleDragLeave);
        document.removeEventListener('dragover', this.#handleDragOver);
        document.removeEventListener('drop', this.#handleDrop);
    }
    async onUpload(event) {
        if (this.disabled)
            return;
        if (!event.detail.files.length && !event.detail.folders.length)
            return;
        const uploadable = this._manager.createMediaItems(event.detail, this.parentUnique);
        this.dispatchEvent(new UmbDropzoneSubmittedEvent(uploadable));
    }
    static { this.styles = [
        ...UmbInputDropzoneElement.styles,
        css `
			:host(:not([disabled])[dragging]) #dropzone {
				opacity: 1;
				pointer-events: all;
			}

			[dropzone] {
				opacity: 0;
			}

			#dropzone {
				opacity: 0;
				pointer-events: none;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				z-index: 100;
				border-radius: var(--uui-border-radius);
				border: 1px solid var(--uui-color-focus);
				box-sizing: border-box;
			}
		`,
    ]; }
};
__decorate([
    property({ attribute: 'parent-unique' })
], UmbDropzoneMediaElement.prototype, "parentUnique", void 0);
UmbDropzoneMediaElement = __decorate([
    customElement('umb-dropzone-media')
], UmbDropzoneMediaElement);
export { UmbDropzoneMediaElement };
export default UmbDropzoneMediaElement;
