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

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'file-uploader-component',
    styleUrls: [
        'file-uploader.component.scss',
    ],
    templateUrl: 'file-uploader.component.template.pug',
})

export class FileUploaderComponent {
    @Input()
    public acceptFormats: string;
    @Input()
    public disabled: boolean = false;
    @Input()
    public multiple = true;

    @Output()
    public onFilesSelected = new EventEmitter<FileList>();

    @ViewChild('fileInput')
    public fileInput: ElementRef;

    public clickedUpload() {
        this.fileInput.nativeElement.click();
    }

    public uploadFiles() {
        const fileList = this.fileInput.nativeElement.files as FileList;
        if (fileList.length === 0) {
            return;
        }
        this.onFilesSelected.emit(fileList);
        this.fileInput.nativeElement.value = '';
    }
}