import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { User, UsersService } from '../services/users.service';
import { Image, ImagesService } from '../services/images.service';
import { ImagesComponent } from '../images/images.component';
import { ScrollService } from '../services/scroll.service';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-page-user',
    templateUrl: './page-user.component.html',
    styleUrls: ['./page-user.component.scss']
})
export class PageUserComponent {
    @ViewChild("imgs")
    public imagesEl!: ImagesComponent;
    public images!: Observable<Image[]>;
    public user: User = { username: 'Loading...' };

    public feed(n: number, i: number) {
        return this._images.userFeed(this.user.username, { n, i });
    }

    public constructor(
        route: ActivatedRoute,
        users: UsersService,
        private _images: ImagesService,
        private _scroll: ScrollService,
    ) {
        route.paramMap.subscribe(async v => {
            this.user = await users.get(v.get('name')!);
            this.images = ImagesComponent.fromFeed(this._scroll.scrollHost!, 10, this.feed.bind(this));
            // this.imagesEl.next();
        });
    }
}