import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { FileUpload } from './interface/file-upload.interface';
import { OctagonAlert, Upload, X } from 'lucide-angular';

@Component({
    selector: 'kit-upload-files',
    templateUrl: './upload-files.component.html',    

})
export class UploadFilesComponent {
    iconUpload = Upload;
    iconOctagon = OctagonAlert;
    iconX =  X;
    public message: string = 'El archivo no pudo ser cargado'
    @ViewChild('inputFile') public inputFile!: ElementRef;
    @Input() public filesSelected!: File[];
    @Input() public allowedFormats: string[] = [];
    @Input() public multipleFiles: boolean = false;
    @Input() public description:string = 'Haz click para cargar documento';
    @Input() public files:FileUpload[]=[];
    @Input() sizeFile!: string;
    @Input() invalidFileView: boolean = false;
    // OUTPUT TO NOTIFY CHANGES
    
    @Output() public filesUpload: EventEmitter<FileUpload[]> = new EventEmitter();
    @Output() public invalidFile: EventEmitter<void> = new EventEmitter();
    @Output() public fileRemoved: EventEmitter<void> = new EventEmitter();
    public fileNameInvalid: string = ''
    public DIALOG_TITLE:string = ''
    public DIALOG_INFO!:string;
    // public files:FileUpload[]=[]
    public dragOverActive: boolean = false;
    constructor(){}

    public get disableAddFile(){
        return !this.multipleFiles && this.files.length === 1
    }

    public getAllowedFormats():string {
        return this.allowedFormats.map(e =>`.${e}`).join(', ');
    }

    public handleUploadFile(event: any): void {
        const file: File = event.target['files'][0];

        event.target['value'] = '';
        
        this.processFile(file);
    } 
      

    public handleDrop(event: DragEvent): void {
        event.preventDefault();
        event.stopPropagation();
        this.dragOverActive = false;
        
        if (event.dataTransfer && event.dataTransfer.files.length > 0) {
            const files = event.dataTransfer.files;
            
            if (this.multipleFiles) {
                let hasInvalidFiles = false;
                
                // Procesar todos los archivos
                for (let i = 0; i < files.length; i++) {
                    const result = this.processMultipleFiles(files[i]);
                    if (!result) {
                        hasInvalidFiles = true;
                    }
                }
                
                // Emitir solo una vez al final
                this.emitFilesUpload();
                
                // Emitir invalidFile solo si hay archivos inválidos
                if (hasInvalidFiles) {
                    this.invalidFile.emit();
                }
            } else {
                this.processFile(files[0]);
            }
        }
    }


    private processMultipleFiles(file: File): boolean {
        const fileName = file.name;
        const fileExtension = file.name.split('.').pop()?.toLowerCase();
        
        if (!this.files) {
            this.files = [];
        }

        if (fileExtension && this.allowedFormats.includes(fileExtension)) {
            if (file.size <= 10 * 1024 * 1024) {
                this.files.push({ file, valid: true });
                return true; // Archivo válido
            } else {
                this.message = 'El archivo no pudo ser cargado';
                this.fileNameInvalid = fileName;
                this.files.push({ file, valid: false });
                return false; // Archivo inválido
            }
        } else {
            this.message = 'El formato del archivo no es el correcto';
            this.fileNameInvalid = fileName ? fileName : '';
            this.files.push({ file, valid: false });
            return false; // Archivo inválido
        }
    }
        

    private processFile(file: File): void {
        const fileName = file.name;
        const fileExtension = file.name.split('.').pop()?.toLowerCase();
        
        if (!this.files) {
            this.files = [];
        }
        if (fileExtension && this.allowedFormats.includes(fileExtension)) {

            if (file.size <= 10 * 1024 * 1024) {
                this.files.push({ file, valid: true });
                this.emitFilesUpload();
            } else {
                this.message = 'El archivo no pudo ser cargado';
                this.invalidFile.emit();
                if (this.multipleFiles) {
                    this.files.push({ file, valid: false })
                    this.emitFilesUpload(); 
                }
            }
        } else {

            this.message = 'El formato del archivo no es el correcto'
            this.fileNameInvalid = fileName ? fileName : '';
            this.invalidFile.emit();
            if (this.multipleFiles) {
                this.files.push({ file, valid: false })
                this.emitFilesUpload(); 
            }
        }
    }
      
    public handleValidFile(index: number) {
        this.files[index].valid = true;
        this.emitFilesUpload();
    }
    
    public onRemoveFile(index: number) {
        this.files.splice(index, 1);
        this.emitFilesUpload();
    }
    public onRemoveInvalidFile(){
        if (this.invalidFileView) {
            this.fileRemoved.emit();
        }
    }
    private emitFilesUpload() {
        this.filesUpload.emit(this.files);
    }

}