import { Component, OnInit, ViewChild } from "@angular/core";
import { ModalController } from "@ionic/angular";
import { StorageService } from '../../services/storage.service';
import { SearchService } from "../../services/search.service";
import { CartService } from "../../services/cart.service";
import { CityService } from "../../services/city.service";
import { AnalyticsFacebookService } from "../../services/analytics-facebook.service";

@Component({
  selector: "page-search",
  templateUrl: "search.html",
  styleUrls: ["./search.scss"],
})
export class SearchPage implements OnInit {
  listProducts: any = [];
  @ViewChild("search") search: any;
  valueSearch: any;
  offset = 0;
  take = 10;
  statusSearch: any = false;
  activeInfinite: any;
  statusNoResults: boolean = false;
  listProductsChanged: number = 0;
  productsCartActive: number = 0;
  constructor(
    private storage: StorageService,
    public modalCtrl: ModalController,
    public searchProvider: SearchService,
    public cartProvider: CartService,
    public cityProvider: CityService,
    private analyticsFacebookService: AnalyticsFacebookService
  ) { }

  ngOnInit() {
  }

  ionViewWillEnter() {
    this.listProducts = [];
    this.valueSearch = "";
    this.offset = 0;
    this.search.setFocus();
  }

  getProducts(val) {
    this.listProducts = [];
    this.valueSearch = val.detail.value;
    this.offset = 0;
    this.statusNoResults = false;

    if (this.activeInfinite) {
      this.activeInfinite.enable(true);
    }

    if (!this.valueSearch || !this.valueSearch.trim()) {
      this.valueSearch = "";
      this.statusSearch = false;
      return;
    }

    if (this.valueSearch.trim().length < 3) {
      return;
    }

    this.statusSearch = true;
    this.listProductsSearch(this.valueSearch.trim(), this.offset, this.take);
  }

  listProductsSearch(valueSearch, offset, take, infiniteScroll?) {
    this.storage.get("token").then(async (token) => {
      if (token) {
        (await this.searchProvider.getSearchProducts(valueSearch, offset, take, this.cartProvider.storeType, token.access_token)).subscribe(
          (resp) => {
            this.statusSearch = false;
            if (resp["status"] == "success") {
              var params = {};
              params["SEARCH_STRING"] = valueSearch;
              params["SUCCESS"] = resp["products"].length ? 1 : 0;
              this.analyticsFacebookService.createLogEvent("EVENT_NAME_SEARCHED", params, null);

              if (resp["products"].length) {
                for (let i = 0; i < resp["products"].length; i++) {
                  let inArray = this.listProducts.find((product) => product.id === resp["products"][i].id);
                  if (!inArray) {
                    this.listProducts.push(resp["products"][i]);
                  }
                  // if (resp["products"][i].percentage_discount > 0 || resp["products"][i].flash_price > 0) {
                  //   this.listProductsChanged++;
                  // }
                }
              }
              if (!this.listProducts.length) {
                this.listProducts = [];
                this.statusNoResults = true;
              } else {
                this.statusNoResults = false;
              }
              if (this.cartProvider.productsCart.length) {
                this.productsCartActive++;
              }
              if (infiniteScroll) {
                infiniteScroll.complete();
                this.activeInfinite = infiniteScroll;
                if (this.offset > this.listProducts.length) {
                  infiniteScroll.enable(false);
                }
              }
            }
          },
          (error) => {
            this.statusSearch = false;
            console.log("error searchProvider: ", error);
          }
        );
      }
    });
  }

  moreProducts(infiniteScroll) {
    if (this.listProducts.length && this.listProducts.length >= this.offset) {
      if (this.valueSearch || (this.valueSearch.trim() && this.valueSearch.trim().length >= 3)) {
        this.offset += 10;
        this.listProductsSearch(this.valueSearch, this.offset, this.take, infiniteScroll);
      } else {
        infiniteScroll.enable(false);
      }
    } else {
      infiniteScroll.enable(false);
    }
  }
}