import { Component, OnInit, ViewChild } from "@angular/core";
import { IonInfiniteScroll } from "@ionic/angular";
import { StorageService } from '../../services/storage.service';
import { TranslateService } from "@ngx-translate/core";

import { HomeService } from "../../services/home.service";
import { CartService } from "../../services/cart.service";
import { UtilsService } from "../../services/utils.service";

@Component({
  selector: "page-trends",
  templateUrl: "trends.html",
  styleUrls: ["./trends.scss"],
})
export class TrendsPage implements OnInit {
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  offset = 0;
  take = 10;
  listProducts: any = [];
  listProductsChanged: number = 0;
  productsCartActive: number = 0;
  constructor(
    private storage: StorageService,
    public homeProvider: HomeService,
    public cartProvider: CartService,
    public utilsService: UtilsService,
    private translate: TranslateService
  ) {}

  ngOnInit() {
    this.productsTrends(this.offset, this.take);
  }

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }

  productsTrends(offset, take, infiniteScroll?) {
    this.storage.get("token").then((token) => {
      if (token) {
        this.utilsService.presentLoading(this.translate.instant("all.loading")).then(async () => {
          (await this.homeProvider.getProductsTrends(offset, take, this.cartProvider.storeType, token.access_token)).subscribe(
            (data) => {
              console.log("data products trends", data);
              if ((data["status"] = "success")) {
                for (let i = 0; i < data["listProducts"].length; i++) {
                  this.listProducts.push(data["listProducts"][i].products);
                  // if (data["listProducts"][i].products.percentage_discount > 0 || data["listProducts"][i].products.flash_price > 0) {
                  //   this.listProductsChanged++;
                  // }
                }
                if (this.cartProvider.productsCart.length) {
                  this.productsCartActive++;
                }
                this.utilsService.dismissLoading();
                if (infiniteScroll) {
                  infiniteScroll.target.complete();
                  if (this.offset > this.listProducts.length && !this.infiniteScroll.disabled) {
                    this.toggleInfiniteScroll();
                  }
                }
              }
            },
            (error) => {
              console.log("error productsTrends: ", error);
              this.utilsService.dismissLoading();
            }
          );
        });
      }
    });
  }

  moreProducts(infiniteScroll) {
    this.offset += 10;
    this.productsTrends(this.offset, this.take, infiniteScroll);
  }
}