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;

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

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

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

  toggleAnnouncement(item) {
    this.arrList.forEach(element => {
      if (element.id === item.id) {
        element.isOpen = !element.isOpen;
      } else {
        element.isOpen = false;
      }
    });
  }

  getAnnouncementListService() {
    let holdData;
    this.announcementService.getAnnouncementListService().subscribe((result: any) => {
      if (this.common.validResponse(result)) {
        holdData = JSON.parse(result.Mohemm_ITG_ResponseItem);
        this.listOfAnnouncement = JSON.parse(holdData.result.data);
        for (let i = 0; i < this.listOfAnnouncement.length; i++) {
          this.listOfAnnouncement[i].Title_EN = this.listOfAnnouncement[i].Title_EN.replace(/<\/?[^>]+(>|$)/g, "");
          this.listOfAnnouncement[i].Title_EN = this.listOfAnnouncement[i].Title_EN.replace(/\&nbsp;/g, '');
          this.listOfAnnouncement[i].Title_AR = this.listOfAnnouncement[i].Title_AR.replace(/<\/?[^>]+(>|$)/g, "");
          this.listOfAnnouncement[i].Title_AR = this.listOfAnnouncement[i].Title_AR.replace(/\&nbsp;/g, '');
          this.listOfAnnouncement[i].EmailBody_EN = this.listOfAnnouncement[i].EmailBody_EN.replace(/<\/?[^>]+(>|$)/g, "");
          this.listOfAnnouncement[i].EmailBody_EN = this.listOfAnnouncement[i].EmailBody_EN.replace(/\&nbsp;/g, '');
          this.listOfAnnouncement[i].EmailBody_AR = this.listOfAnnouncement[i].EmailBody_AR.replace(/<\/?[^>]+(>|$)/g, "");
          this.listOfAnnouncement[i].EmailBody_AR = this.listOfAnnouncement[i].EmailBody_AR.replace(/\&nbsp;/g, '');
          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 = this.arr;
      }
    });
  }

  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 ++;
        }
      }
      if (this.announcememntCounter >= this.arrList.length) {
        event.target.disabled = true;
      }
    }, 500);
  }

}
