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 { MelodicComponent } from '@melodicdev/core';
import { fileUploadTemplate } from './file-upload.template.js';
import { fileUploadStyles } from './file-upload.styles.js';
let FileUploadComponent = class FileUploadComponent {
    constructor() {
        this.accept = '';
        this.multiple = false;
        this.maxSize = 0;
        this.maxFiles = 0;
        this.disabled = false;
        this.label = 'Click to upload';
        this.sublabel = 'or drag and drop';
        this.hint = '';
        this.error = '';
        this.icon = 'cloud-arrow-up';
        this.dragOver = false;
        this._dragCounter = 0;
        this.handleClick = () => {
            if (this.disabled)
                return;
            const input = this.elementRef.shadowRoot?.querySelector('input[type="file"]');
            input?.click();
        };
        this.handleFileInput = (event) => {
            const input = event.target;
            if (!input.files?.length)
                return;
            this.processFiles(Array.from(input.files));
            input.value = '';
        };
        this.handleDragEnter = (event) => {
            event.preventDefault();
            event.stopPropagation();
            if (this.disabled)
                return;
            this._dragCounter++;
            if (this._dragCounter === 1) {
                this.dragOver = true;
            }
        };
        this.handleDragOver = (event) => {
            event.preventDefault();
            event.stopPropagation();
        };
        this.handleDragLeave = (event) => {
            event.preventDefault();
            event.stopPropagation();
            this._dragCounter--;
            if (this._dragCounter === 0) {
                this.dragOver = false;
            }
        };
        this.handleDrop = (event) => {
            event.preventDefault();
            event.stopPropagation();
            this._dragCounter = 0;
            this.dragOver = false;
            if (this.disabled)
                return;
            const files = event.dataTransfer?.files;
            if (!files?.length)
                return;
            this.processFiles(Array.from(files));
        };
    }
    processFiles(files) {
        const errors = [];
        let validFiles = files;
        if (this.accept) {
            const acceptedTypes = this.accept.split(',').map(t => t.trim().toLowerCase());
            validFiles = validFiles.filter(file => {
                const ext = '.' + file.name.split('.').pop()?.toLowerCase();
                const mime = file.type.toLowerCase();
                const matches = acceptedTypes.some(type => {
                    if (type.startsWith('.'))
                        return ext === type;
                    if (type.endsWith('/*'))
                        return mime.startsWith(type.replace('/*', '/'));
                    return mime === type;
                });
                if (!matches) {
                    errors.push({ type: 'accept', file, message: `${file.name} is not an accepted file type` });
                }
                return matches;
            });
        }
        if (this.maxSize > 0) {
            validFiles = validFiles.filter(file => {
                if (file.size > this.maxSize) {
                    errors.push({ type: 'max-size', file, message: `${file.name} exceeds maximum size` });
                    return false;
                }
                return true;
            });
        }
        if (this.maxFiles > 0 && validFiles.length > this.maxFiles) {
            errors.push({ type: 'max-files', message: `Maximum ${this.maxFiles} files allowed` });
            validFiles = validFiles.slice(0, this.maxFiles);
        }
        if (errors.length > 0) {
            this.elementRef.dispatchEvent(new CustomEvent('ml:error', {
                bubbles: true,
                composed: true,
                detail: { errors }
            }));
        }
        if (validFiles.length > 0) {
            this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
                bubbles: true,
                composed: true,
                detail: { files: validFiles }
            }));
        }
    }
};
FileUploadComponent = __decorate([
    MelodicComponent({
        selector: 'ml-file-upload',
        template: fileUploadTemplate,
        styles: fileUploadStyles,
        attributes: ['accept', 'multiple', 'max-size', 'max-files', 'disabled', 'label', 'sublabel', 'hint', 'error', 'icon']
    })
], FileUploadComponent);
export { FileUploadComponent };
