import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ModalController } from '@ionic/angular';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { OfferDiscountService } from '../services/service';
import { IonInfiniteScroll } from '@ionic/angular';
import { DomSanitizer} from '@angular/platform-browser';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements AfterViewInit {

  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

  segment: any = '1';
  categoriesObj: any;
  categories: any = [];
  offersData: any = [];
  activeClass: any;
  tempSearch: any = [];
  searchText: String;
  direction: any;
  itemCounter = 1;
  itemType: any;
  isData = true;
  // categories:any =  [];
  constructor(
    public ts: TranslatorService, 
    public modalController: ModalController, 
    public cs: CommonService, 
    public offersService: OfferDiscountService, 
    public route: ActivatedRoute,
    private sanitizer: DomSanitizer) {

    this.route
      .params.subscribe(val => {
        setTimeout(() => {
          this.ionEnter();
        }, 100);
      });
  }

  ngAfterViewInit(): void {
    this.getOfferDiscount();
  }

  ionEnter() {
    this.direction = TranslatorService.getCurrentDirection();
    console.log(this.direction);
    let activeClass = this.cs.sharedService.getSharedData(OfferDiscountService.selected_filters);

    if (activeClass) {
      this.filterOffers(activeClass);
    } else {
      this.getCategories();
      this.tempSearch = JSON.parse(JSON.stringify(this.offersData));
    }
  }
  getCategories() {
    this.offersService.getCategories({}).subscribe((result) => {
      this.categories = JSON.parse(result.Mohemm_ITG_ResponseItem).result.data; //result.result.data;
      for (let i = 0; i < this.categories.length; i++) {
        this.categories[i].content = this.sanitizer.bypassSecurityTrustHtml(this.categories[i].content);
      }
      this.cs.sharedService.setSharedData(this.categories, OfferDiscountService.categories);
    });
  }
  openDetails(offer) {
    this.cs.sharedService.setSharedData(offer, OfferDiscountService.selected_offers);

    var related = this.offersData.filter((res) => res.rowID != offer.rowID);
    this.cs.sharedService.setSharedData(related, OfferDiscountService.related_offers);

    this.cs.navigateForward('/offersdiscount/offer-details');
  }

  getOfferDiscount(pageNo?, categoryId?) {
    this.cs.startLoading();
    if (categoryId) {
      this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry'),pageNo, categoryId).subscribe((res) => {
        var data = JSON.parse(res['Mohemm_ITG_ResponseItem']);
        this.cs.stopLoading();
        if (data['result']) {
          this.displayOffers(data['result']);
          this.isData = true;
        }else{
          this.isData = false;
        }
      });
    } else {
      this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry')).subscribe((res) => {
        var data = JSON.parse(res['Mohemm_ITG_ResponseItem']);
        this.cs.stopLoading();
        if (data['result']){
          this.displayOffers(data['result']);
          this.isData = true;
        } else{this.isData = false;}
      });
    }

  }

  displayOffers(data) {
    if (data['data']) {
      var parseJSON = data['data'];
      var offers = JSON.parse(parseJSON);
      this.offersData = offers;
      this.tempSearch = this.offersData;
    }
  }

  filterOffers(key) {
    if(this.direction === 'ltr') {
      this.activeClass = key.categoryName_en;
    }else {
      this.activeClass = key.categoryName_ar
    }
    this.itemType = key.id;
    this.getOfferDiscount(1,this.itemType)
  }

  checkDate(date) {
    return new Date(date) >= new Date()
  }

  getDotted(temp) {
    temp = this.stripHtml(temp);
    return temp.substring(0, 70) + " ...";
  }

  stripHtml(html) {
    var temporalDivElement = document.createElement("div");

    temporalDivElement.innerHTML = html;

    return temporalDivElement.textContent || temporalDivElement.innerText || "";
  }


  search(t) {
    console.log(this.tempSearch);
    if(t === ''){
      this.offersData = this.tempSearch;
    } else{
      this.offersData = this.tempSearch.filter((post) => {
        return (post.Title.toLowerCase().indexOf(t.toLowerCase()) > -1);
      });
    }

  }

  async openModel() {
    // const modal = await this.modalController.create({
    //   component: FilterComponent,

    // });
    // modal.cssClass = "filter-modal"
    // modal.present();
    this.cs.navigateForward('/offersdiscount/filter-page');
  }

  loadData(event) {
    const counter = 1;
    this.itemCounter += counter;
    console.log(this.itemType);
    if (this.itemType) {
      setTimeout(() => {
        event.target.complete();
        console.log(this.itemCounter);
        this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry'), this.itemCounter, this.itemType).subscribe((res) => {
          const data = JSON.parse(res['Mohemm_ITG_ResponseItem']);
          if (data['result']){
            const allItem = JSON.parse(data.result['data']);
            if (allItem) {
              allItem.forEach(element => {
                this.offersData.push(element);
              });
            }
          }
        });
        // event.target.disabled = true;
      }, 1000);
    } else {
      setTimeout(() => {
        event.target.complete();
        console.log(this.itemCounter);
        this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry'), this.itemCounter).subscribe((res) => {
          const data = JSON.parse(res['Mohemm_ITG_ResponseItem']);
          if (data['result']){
            const allItem = JSON.parse(data.result['data']);
            if (allItem) {
              allItem.forEach(element => {
                this.offersData.push(element);
              });
            }
          }
        });
        // event.target.disabled = true;
      }, 1000);
    }
  }
}
