import {
    Inject,
    Injectable,
} from '@angular/core';

import { Observable } from 'rxjs';
import { Observer } from 'rxjs';

@Injectable()
export class ImagePreloaderService {
    public load(
        imageSrcs: string[] | string,
    ): Observable<HTMLImageElement[] | HTMLImageElement> {
        return Observable.create((
            observer: Observer<HTMLImageElement[] | HTMLImageElement>,
        ) => {
            if (typeof imageSrcs === 'string') {
                imageSrcs = [imageSrcs];
            }
            const definedImageSrcs =
                imageSrcs.filter((imgSrc) => imgSrc != null);
            const allImages = definedImageSrcs.map((src) => {
                const image = new Image();
                image.src = src;
                return image;
            });

            let numberImagesToLoad = allImages.length;
            allImages.forEach((image) => {
                image.onload = () => {
                    if (--numberImagesToLoad === 0) {
                        observer.next(
                            allImages.length === 1
                            ?
                                allImages[0]
                                :
                                allImages,
                        );
                        observer.complete();
                    }
                };

                image.onerror = (error) => {
                    observer.error(error);
                };
            });
        });
    }
}