import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
    selector: 'app-image-upload',
    templateUrl: './image-upload.component.html',
    styleUrl: './image-upload.component.scss'
})
export class ImageUploadComponent {
    @Input() imageUrl: string | null | undefined = null;
    @Input() label: string = 'Bild';
    @Input() disabled: boolean = false;
    @Input() fieldId: string = 'mediaFile';

    @Output() fileSelected = new EventEmitter<File>();
    @Output() fileDeleted = new EventEmitter<void>();

    selectedFile: File | null = null;
    showImage: boolean = true;

    onFileSelected(event: Event): void {
        const element = event.target as HTMLInputElement;
        if (element.files && element.files.length > 0) {
            this.selectedFile = element.files[0];
            this.fileSelected.emit(this.selectedFile);
        }
    }

    deleteImage(): void {
        this.showImage = false;
        this.fileDeleted.emit();
        this.selectedFile = null;
    }

    reset(): void {
        this.selectedFile = null;
        this.showImage = this.imageUrl !== null;
    }
}