import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {WpEndpoint, CollectionDirective, CollectionResponse} from '../../core/wordpress';

@Component({
  selector: 'feed-page',
  templateUrl: `
  <div class="feed" #feed [wpCollection]="postsEndpoint" [wpArgs]="postsArgs">

    <ul>
      <li *ngFor="let post of posts">{{post.title()}}</li>
    </ul>

    <button (click)="loadMore()">Load more</button>
  </div>

  <loading-icon *ngIf="isLoading"></loading-icon>
  `
})
export class HomeComponent implements AfterViewInit {

  /** Posts Endpoint */
  postsEndpoint = WpEndpoint.posts;

  /** Posts Args */
  // in case you are using the filter plugin
  postsArgs = {
    'filter[orderby]': 'rand',
    per_page: 10,
    _embed: true
  };

  /** Posts Response */
  posts;

  /** For scroll more and loading icon */
  postsLoading: boolean = false;

  /** Get the directive reference */
  @ViewChild(CollectionDirective) feed: CollectionDirective;

  ngAfterViewInit() {
    this.feed.response.subscribe((res) => {
      if (res) {
        if (res.error) {
          console.log('[Feed Posts]:', res.error);
        }
        if (res.data) {
          if (!this.bannerPosts) {
            /** Slice the first 3 posts for banner posts */
            this.bannerPosts = res.data.splice(0, 3);
          }
          this.feedPosts = res.data;
        }
      }
    });
    /** Show spinner loading */
    this.feed.wpLoading.distinctUntilChanged().subscribe((loading) => {
      this.postsLoading = loading;
      this.changeDetectorRef.markForCheck();
    });
  }


  /** Load more feed on scroll */
  loadMore() {
    this.feed.more();
  }

  postResponse(res: CollectionResponse) {
    if (res) {
      if (res.error) {
        console.log('[Sidebar Posts]:', res.error);
      }
      if(!res.data.length){

      }
      if (res.data) {
        this.sidebarPosts = res.data;
      }
    }
  }

}