import { AfterContentChecked, Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { SwiperComponent } from 'swiper/angular';
import { SwiperOptions } from 'swiper';
import SwiperCore, { Pagination, Autoplay, Navigation, Keyboard } from 'swiper';
import { WpdataService } from '../services/wpdata.service';

SwiperCore.use([Pagination, Autoplay, Navigation, Keyboard]);
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  encapsulation: ViewEncapsulation.None
})
export class HomePage implements AfterContentChecked {

  newsdata: any;
  ytalldata: any;

  @ViewChild('swiper') swiper: SwiperComponent;

  config: SwiperOptions = {
    slidesPerView: 1,
    pagination: { clickable: true },
    autoplay: {
      delay: 200,
      disableOnInteraction: false,
    },
    loop: true,
    navigation: true,
  }

  constructor(private wpgetdataService: WpdataService) { }

  ngAfterContentChecked() {
    if (this.swiper) {
      this.swiper.updateSwiper({});
    }
  }

  ionViewWillEnter() {
    this.wpgetdataService.getAllNews().subscribe((data) => {
      this.newsdata = data;
      console.log('load News Data');
      console.log(this.newsdata);
    });

    this.wpgetdataService.getAllYoutube().subscribe((data) => {
      this.ytalldata = data;
      console.log('load YouTube');
      console.log(this.ytalldata);
    });
  }

}
