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

import {
    ALLOWED_PICTURE_FORMATS,
} from './../../models/index';

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

export class PictureFileUploaderComponent {
    @Input()
    public disabled: boolean = false;
    @Input()
    public multiple = true;
    @Output()
    public onFilesSelected = new EventEmitter<File[]>();
    @Output()
    public onUploadInvalidFile = new EventEmitter<File[]>();

    public get acceptFormats() {
        return ALLOWED_PICTURE_FORMATS.join(',');
    }

    public filesSelected(files: FileList) {
        const filesArray = Array.from(files);
        const isFileValid = ({ type }: File) => (
            ALLOWED_PICTURE_FORMATS.includes(type)
        );
        const invalidFiles = filesArray.filter((file) => !isFileValid(file));
        const validFiles = filesArray.filter(isFileValid);
        if (validFiles.length > 0) {
            this.onFilesSelected.emit(validFiles);
        }
        if (invalidFiles.length > 0) {
            this.onUploadInvalidFile.emit(invalidFiles);
        }
    }
}