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

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

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'image-collector-component',
    styleUrls: [
        './image-collector.component.scss',
    ],
    templateUrl: './image-collector.component.template.pug',
})
export class ImageCollectorComponent {
    @Input()
    public imageFiles: ImageCollectorImageInterface[];

    @Input()
    public selectedImageId: string;

    @Input()
    public headerText: string;

    @Input()
    public buttonText: string;

    @Input()
    public hideUploadBtn = false;

    @Output()
    public onImageFileUpload = new EventEmitter<File[]>();

    @Output()
    public onUploadInvalidFile = new EventEmitter<File[]>();

    @Output()
    public onImageClick = new EventEmitter<ImageCollectorImageInterface>();

    @Output()
    public onImageDrag = new EventEmitter<ImageCollectorImageInterface>();

    public uploadImageFile(files: File[]) {
        this.onImageFileUpload.emit(files);
    }

    public uploadInvalidFile(files: File[]) {
        this.onUploadInvalidFile.emit(files);
    }

    public dragImage(imageFile: ImageCollectorImageInterface) {
        this.onImageDrag.emit(imageFile);
    }

    public clickSelectImage(imageFile: ImageCollectorImageInterface) {
        if (imageFile.isUploadComplete) {
            this.onImageClick.emit(imageFile);
        }
    }

    public trackByImageId(imageCollectorImage: ImageCollectorImageInterface) {
        return imageCollectorImage.id;
    }

    public isSelected({
        id,
    }: ImageCollectorImageInterface) {
        return Boolean(this.selectedImageId && id === this.selectedImageId);
    }

    public shouldAllowHoverEffect(
        imageCollectorImage: ImageCollectorImageInterface,
    ) {
        return imageCollectorImage.isUploadComplete &&
            !this.isSelected(imageCollectorImage);
    }
}