import { Component, OnInit, ViewChild } from '@angular/core';
import { detachEmbeddedView } from '@angular/core/src/view';
import { AnnouncementService } from 'src/app/hmg-common/services/announcement-services/announcement.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'app-announcement',
  templateUrl: './announcement.component.html',
  styleUrls: ['./announcement.component.scss'],
})
export class AnnouncementComponent implements OnInit {
  public arr: { id: number, title_EN: string, title_AR: string, body_EN: string, body_AR: string, img?: string, date: Date, isopen: boolean }[] = [];
  public arrList = [];
  public listOfAnnouncement;
  direction: string;
  public announcementList = [];
  public numberOfListLength = 10;
  public announcememntCounter = this.numberOfListLength;
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  public pageSize = 1;
  public pageLength = 0;
  public lengthCounter = 5;
  public detialData: { 
    id: number, 
    title_EN: string, 
    title_AR: string, 
    body_EN: string, 
    body_AR: string, 
    img?: string, 
    date: Date};

  constructor(
    public announcementService: AnnouncementService,
    public translate: TranslatorService,
    public common: CommonService
  ) { }

  ngOnInit() {
    this.common.startLoading();
    this.direction = TranslatorService.getCurrentLanguageName();
    this.getAnnouncementListService();
  }

  filterList(event) {
    const val = event.target.value;
    if (val === '') {
      this.announcementList = this.arrList;
    }
    this.announcementList = this.arrList.filter((item) => {
      return (item.title_EN.toLowerCase().indexOf(val.toLowerCase()) > -1);
    });
  }

  toggleAnnouncement(item) {
    this.common.startLoading();
    let holdData;
    let data;
    this.announcementList.forEach(element => {
      if (element.id === item.id) {
        this.announcementService.getAnnouncementListService(this.pageSize, item.id).subscribe((result: any) => {
          this.common.stopLoading();
          if (this.common.validResponse(result)) {
            holdData = JSON.parse(result.Mohemm_ITG_ResponseItem);
            data = JSON.parse(holdData.result.data)[0];
            console.log(data);
            this.detialData = {
              id: data.rowID,
              title_EN: data.Title_EN,
              title_AR: data.Title_AR,
              body_EN: data.Body_EN,
              body_AR: data.Body_AR,
              date: data.created,
              img: data.Banner_Image
            };
            element.isOpen = !element.isOpen;
            // this.common.stopLoading();
          }
          console.log(this.detialData);
        });
      } else {
        element.isOpen = false;
      }
    });
  }


  closeAnnouncement(item){
    item.isOpen = false;
  }

  getAnnouncementListService() {
    // this.common.startLoading();
    let holdData;
    this.announcementService.getAnnouncementListService(this.pageSize).subscribe((result: any) => {
      this.common.stopLoading();
      if (this.common.validResponse(result)) {
        holdData = JSON.parse(result.Mohemm_ITG_ResponseItem);
        this.listOfAnnouncement = JSON.parse(holdData.result.data);
        this.pageLength = this.listOfAnnouncement[0].TotalItems;
        for (let i = 0; i < this.listOfAnnouncement.length; i++) {
          this.listOfAnnouncement[i].Title_EN = this.listOfAnnouncement[i].Title_EN;
          this.listOfAnnouncement[i].Title_AR = this.listOfAnnouncement[i].Title_AR;
          this.listOfAnnouncement[i].EmailBody_EN = this.listOfAnnouncement[i].EmailBody_EN;
          this.listOfAnnouncement[i].EmailBody_AR = this.listOfAnnouncement[i].EmailBody_AR;
          this.arr[i] = {
            id: this.listOfAnnouncement[i].rowID,
            title_EN: this.listOfAnnouncement[i].Title_EN,
            title_AR: this.listOfAnnouncement[i].Title_AR,
            body_EN: this.listOfAnnouncement[i].EmailBody_EN,
            body_AR: this.listOfAnnouncement[i].EmailBody_AR,
            date: this.listOfAnnouncement[i].created,
            img: this.listOfAnnouncement[i].Banner_Image,
            isopen: false
          };
          if ( i < this.numberOfListLength){
            this.announcementList.push(this.arr[i]);
          }
          this.arrList.push(this.arr[i]);
        }
      }
      // this.common.stopLoading();
    });
  }

  loadData(event) {
    // let counter = this.numberOfListLength + this.announcememntCounter;
    setTimeout(() => {
      event.target.complete();
      // for(let i = this.announcememntCounter; i < counter; i++) {
      //   if(this.arrList[i]) {
      //     this.announcementList.push(this.arrList[i]);
      //     this.announcememntCounter ++;
      //   }
      // }
      this.pageSize += 1;
      if (this.lengthCounter >= this.pageLength) {
        event.target.disabled = true;
      } else {
        this.getAnnouncementListService();
      }
      this.lengthCounter += 5;
    }, 500);
  }

}
