import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Image, ImagesService } from '../services/images.service';
import { ScrollService } from '../services/scroll.service';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-images',
    templateUrl: './images.component.html',
    styleUrls: ['./images.component.scss']
})
export class ImagesComponent {
    private static nextFrame() {
        return new Promise(requestAnimationFrame);
    }

    public static fromFeed(element: HTMLDivElement, n: number, feed: (n: number, i: number) => Promise<Image[]>) {
        return new Observable<Image[]>(sub => {
            let done = false;
            let images: Image[] = [];
            let i = 0;

            (async () => {
                while (!done) {
                    await this.nextFrame();
                    if (element.scrollTop + element.clientHeight * 1.5 < element.scrollHeight) continue;

                    const els = await feed(n, i++);
                    images.push(...els);

                    if (els.length === 0) {
                        sub.complete();
                        return;
                    }
                    else sub.next(images);
                }
            })();
        });
    }

    @Input() public images: Image[] | null = null;

    public ended = false;
    public i = 0;

    public constructor() {
    }
}