import { AnalyticsService } from './../../services/analytics.service';
import { Component, OnInit } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";
import { NavController, ModalController, IonRouterOutlet, AlertController } from "@ionic/angular";
import { StorageService } from '../../services/storage.service';
import { ActivatedRoute, NavigationStart, Router } from "@angular/router";
import { HomeService } from "../../services/home.service";
import { UserService } from "../../services/user.service";
import { CartService } from "../../services/cart.service";
import { OrderService } from "../../services/order.service";
import { CityService } from "../../services/city.service";
import { UtilsService } from "../../services/utils.service";
import { CommsService } from "../../services/comms.service";
import { ParameterService } from "../../services/parameter.service";
import { ChangeDirectionPage } from "../change-direction/change-direction";

@Component({
  selector: "page-list-master",
  templateUrl: "list-master.html",
  styleUrls: ["./list-master.scss"],
})
export class ListMasterPage implements OnInit {
  loading_skeleton: boolean = true;
  infocategory: any;
  valueCategory_id: any;
  addressUser: any;
  addressLastUsed: any;
  messageText: any;
  isSubscriber: boolean;
  presuscriptionMsj: string;
  parameters: any;
  banners: any = [];
  maximumCategoryCards: number = 4;
  slideOpts = {
    initialSlide: 0,
    speed: 400,
    autoplay: {
      delay: 5000,
    },
  };
  slideOptsTickets = {
    initialSlide: 0,
    speed: 600,
    autoplay: {
      delay: 6000,
    },
    slidesPerView: 1,
    coverflowEffect: {
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    },
    on: {
      beforeInit() {
        const swiper = this;

        swiper.classNames.push(
          `${swiper.params.containerModifierClass}coverflow`
        );
        swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);

        swiper.params.watchSlidesProgress = true;
        swiper.originalParams.watchSlidesProgress = true;
      },
      setTranslate() {
        const swiper = this;
        const {
          width: swiperWidth,
          height: swiperHeight,
          slides,
          $wrapperEl,
          slidesSizesGrid,
          $,
        } = swiper;
        const params = swiper.params.coverflowEffect;
        const isHorizontal = swiper.isHorizontal();
        const transform$$1 = swiper.translate;
        const center = isHorizontal
          ? -transform$$1 + swiperWidth / 2
          : -transform$$1 + swiperHeight / 2;
        const rotate = isHorizontal ? params.rotate : -params.rotate;
        const translate = params.depth;
        // Each slide offset from center
        for (let i = 0, length = slides.length; i < length; i += 1) {
          const $slideEl = slides.eq(i);
          const slideSize = slidesSizesGrid[i];
          const slideOffset = $slideEl[0].swiperSlideOffset;
          const offsetMultiplier =
            ((center - slideOffset - slideSize / 2) / slideSize) *
            params.modifier;

          let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
          let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
          // var rotateZ = 0
          let translateZ = -translate * Math.abs(offsetMultiplier);

          let translateY = isHorizontal ? 0 : params.stretch * offsetMultiplier;
          let translateX = isHorizontal ? params.stretch * offsetMultiplier : 0;

          // Fix for ultra small values
          if (Math.abs(translateX) < 0.001) translateX = 0;
          if (Math.abs(translateY) < 0.001) translateY = 0;
          if (Math.abs(translateZ) < 0.001) translateZ = 0;
          if (Math.abs(rotateY) < 0.001) rotateY = 0;
          if (Math.abs(rotateX) < 0.001) rotateX = 0;

          const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

          $slideEl.transform(slideTransform);
          $slideEl[0].style.zIndex =
            -Math.abs(Math.round(offsetMultiplier)) + 1;
          if (params.slideShadows) {
            // Set shadows
            let $shadowBeforeEl = isHorizontal
              ? $slideEl.find(".swiper-slide-shadow-left")
              : $slideEl.find(".swiper-slide-shadow-top");
            let $shadowAfterEl = isHorizontal
              ? $slideEl.find(".swiper-slide-shadow-right")
              : $slideEl.find(".swiper-slide-shadow-bottom");
            if ($shadowBeforeEl.length === 0) {
              $shadowBeforeEl = swiper.$(
                `<div class="swiper-slide-shadow-${isHorizontal ? "left" : "top"
                }"></div>`
              );
              $slideEl.append($shadowBeforeEl);
            }
            if ($shadowAfterEl.length === 0) {
              $shadowAfterEl = swiper.$(
                `<div class="swiper-slide-shadow-${isHorizontal ? "right" : "bottom"
                }"></div>`
              );
              $slideEl.append($shadowAfterEl);
            }
            if ($shadowBeforeEl.length)
              $shadowBeforeEl[0].style.opacity =
                offsetMultiplier > 0 ? offsetMultiplier : 0;
            if ($shadowAfterEl.length)
              $shadowAfterEl[0].style.opacity =
                -offsetMultiplier > 0 ? -offsetMultiplier : 0;
          }
        }

        // Set correct perspective for IE10
        if (
          swiper.support.pointerEvents ||
          swiper.support.prefixedPointerEvents
        ) {
          const ws = $wrapperEl[0].style;
          ws.perspectiveOrigin = `${center}px 50%`;
        }
      },
      setTransition(duration) {
        const swiper = this;
        swiper.slides
          .transition(duration)
          .find(
            ".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left"
          )
          .transition(duration);
      },
    },
  };
  constructor(
    public navCtrl: NavController,
    public modalCtrl: ModalController,
    public alertCtrl: AlertController,
    private storage: StorageService,
    public homeProvider: HomeService,
    public userProvider: UserService,
    public cartProvider: CartService,
    public orderProvider: OrderService,
    public cityProvider: CityService,
    public utilsService: UtilsService,
    private translateService: TranslateService,
    private routerOutlet: IonRouterOutlet,
    private router: Router,
    private route: ActivatedRoute,
    public alertController: AlertController,
    public parameterService: ParameterService,
    public commsService: CommsService,
    private analyticsService: AnalyticsService
  ) {
    // traduccion textos
    this.translateService
      .get([
        "TEXT_TOAST_END_VERSION_HOME",
        "TITLE_VALIDATE_INVITED",
        "TEXT_VALIDATE_INVITED",
        "TITLE_COMPLETE_PROFILE",
        "TEXT_COMPLETE_PROFILE",
      ])
      .subscribe((values) => {
        this.messageText = {
          TextToastEndVersionHome: values.TEXT_TOAST_END_VERSION_HOME,
          titleValidateInvited: values.TITLE_VALIDATE_INVITED,
          textValidateInvited: values.TEXT_VALIDATE_INVITED,
          titleCompleteProfle: values.TITLE_COMPLETE_PROFILE,
          textCompleteProfle: values.TEXT_COMPLETE_PROFILE,
        };
      });

    router.events.subscribe((event: NavigationStart) => {
      if (event.navigationTrigger === 'popstate' && event.url.includes('shop')) {
        setTimeout(() => {
          this.getInfoAddressLastUsed();
        }, 500);
      }
    });
  }

  ngOnInit() {
    this.cartProvider.storeType = this.route.snapshot.paramMap.get("storeType") ?? 'main';
    this.validateStoreDataAcademy();
    this.loading_skeleton = true;
    this.storage.get("infoUser").then((info) => {
      this.isSubscriber = (info.is_subscriber == 1);
    });
    this.storage.get("parameters").then((parameters) => {
      this.parameters = parameters;
      this.presuscriptionMsj = parameters.presuscription_msj;
    });

    this.loadInit(100);
  }

  loadInit(time = 0) {
    if (time)
      this.cartProvider.deleteAllProductsCart();
    return new Promise((resolve, reject) => {
      Promise.all([
        this.userProvider.getInfoUser().then((user: any) => {
          if (user.id != 2)
            this.commsService.getPopups('app-store');
        }),
        this.orderProvider.getPendingOrders(),
        this.commsService.getBanners('app-store').then((banners) => {
          this.banners = banners;
        }),
        this.homeProvider.infoCategories(this.cartProvider.storeType),
        this.homeProvider.getSymbolicBallot(),
        this.cartProvider.getProductsCart(),
        this.cartProvider.getPriceDomicile(),
        this.cartProvider.getPaymentTypesDomicile(),
      ]).then(() => {
        setTimeout(() => {
          this.loading_skeleton = false;
        }, 1000);
        resolve(false);
      }, reject);
    });
  }

  ionViewWillEnter() {
    let storeType = this.route.snapshot.paramMap.get("storeType") ?? 'main';
    if (storeType != this.cartProvider.storeType) {
      this.cartProvider.storeType = storeType;
      this.loadInit(100);
    }
    setTimeout(() => {
      this.getInfoAddressLastUsed();
      this.storage.get("infoEndVersion").then((infoEndVersion) => {
        if (infoEndVersion) {
          if (
            infoEndVersion.end_version_home &&
            infoEndVersion.end_version_home != null
          ) {
            this.utilsService.presentToast(
              4000,
              "warning",
              "top",
              this.messageText.TextToastEndVersionHome
            );
          }
        }
      });
    }, 500);
    if (!this.cityProvider._urlGallery) {
      this.cityProvider.getInfoHost();
    }
  }

  goToSearch() {
    if (this.cartProvider.storeType == "main") {
      this.router.navigate(["/app/tabs/shop/search"]);
    } else {
      this.router.navigate(["/shop/" + this.cartProvider.storeType + "/search"]);
    }
  }

  goToCart() {
    this.analyticsService.logEvent('Cart Click', this.utilsService.categoryShop);
    this.router.navigate(["/app/tabs/shop/cart"]);
  }

  openItemCategory(category) {
    this.analyticsService.logEvent('Category Click', this.utilsService.categoryShop);
    this.homeProvider._currentCategory = category;
    this.router.navigate(["/shop/" + this.cartProvider.storeType + "/item-detail"]);
  }

  actionClickBanner(banner) {
    this.analyticsService.logEvent('Banner Click', this.utilsService.categoryShop);
    switch (banner.type_action_id) {
      case 1: // Categoria
        this.infocategory = this.homeProvider._listCategories.find(
          (category) => category.id === parseInt(banner.value)
        );
        this.openItemCategory(this.infocategory);
        break;

      case 2: // Link
        let link = banner.value;
        this.utilsService.openLink(link);
        break;

      case 3: // Menu item
        if (this.cartProvider.storeType == "main") {
          this.router.navigate([banner.value]);
        } else {
          this.router.navigate(["/shop/" + this.cartProvider.storeType]);
        }
        break;

      default:
        break;
    }
  }

  doRefresh(event, isChangeLocation) {
    this.loadInit().then(() => {
      if (!isChangeLocation) {
        event.target.complete();
      } else {
        this.cartProvider.deleteAllProductsCart();
        setTimeout(() => {
          this.getInfoAddressLastUsed();
        }, 500);
      }
    });
  }

  doRefreshSucursal() {
    this.homeProvider.infoCategories();
    this.cartProvider.deleteAllProductsCart();
    this.getInfoAddressLastUsed();
  }

  getInfoAddressLastUsed() {
    this.userProvider.getInfoUser().then((resp: any) => {
      this.addressUser = resp["addresses"];
      this.addressLastUsed = this.addressUser.find(
        (addressLastUsed) => addressLastUsed.last_used === 1
      );
    });
  }

  async changeAddress() {
    const modal = await this.modalCtrl.create({
      component: ChangeDirectionPage,
      swipeToClose: true,
      presentingElement: this.routerOutlet.nativeEl,
      componentProps: {},
    });
    await modal.present();

    const { data } = await modal.onWillDismiss();
    if (data && data.status) {
      this.utilsService
        .presentLoading(this.translateService.instant("all.loading"))
        .then(() => {
          if (this.userProvider._infoUser.user_info.social_provider == null) {
            this.userProvider
              .changeCityUser(
                this.userProvider._infoUser.email,
                this.userProvider._infoUser.password
              )
              .then((resp: any) => {
                this.utilsService.dismissLoading();
                if (resp["user"].user_info.is_initial) {
                  this.navigateAddress();
                } else {
                  this.doRefresh(false, true);
                }
              })
              .catch((error) => {
                this.utilsService.dismissLoading();
                console.log("error changeAddress: ", error);
              });
          } else if (
            this.userProvider._infoUser.user_info.social_provider == "facebook"
          ) {
            this.storage.get("authResponseFacebook").then((authResponse) => {
              if (authResponse) {
                this.userProvider
                  .changeCityUserFacebook(authResponse)
                  .then((res) => {
                    this.utilsService.dismissLoading();
                    if (res["userInfo"].user_info.is_initial) {
                      this.navigateAddress();
                    } else {
                      this.doRefresh(false, true);
                    }
                  })
                  .catch((error) => {
                    console.log("error changeAddress Facebook: ", error);
                  });
              }
            });
          }
        });
    } else if (data && !data.status && data.origin == "changeSucursal") {
      this.doRefreshSucursal();
    } else {
      this.getInfoAddressLastUsed();
    }
  }

  navigateAddress() {
    this.router.navigate(["/address/addressListCreate/false"]).then(() => {
      this.doRefresh(false, true);
    });
  }

  async alertUserInvited() {
    const confirm = await this.alertCtrl.create({
      header: this.messageText.titleValidateInvited,
      message: this.messageText.textValidateInvited,
      buttons: [
        {
          text: "Cancelar",
          handler: () => { },
        },
        {
          text: "Registrarme",
          handler: () => {
            this.storage.remove("token");
            this.storage.remove("infoUser");
            this.navCtrl.navigateRoot("/city-connection");
          },
        },
      ],
    });

    await confirm.present();
  }

  openDetailBallot(ticket) {
    if (ticket.is_salable) {
      if (ticket.is_subscriber && !this.isSubscriber) {
        this.utilsService.presentAlertInfo(this.translateService.instant("tickets.alert"), "", this.presuscriptionMsj);
      } else {
        this.alertUserInvitedOrder(ticket);
      }
    } else {
      this.simbolicTicketNotAvailable();
    }
  }

  async simbolicTicketNotAvailable() {
    const alert = await this.alertController.create({
      header: this.translateService.instant("TICKET_NOT_AVAILABLE_HEADER"),
      message: this.translateService.instant("TICKET_NOT_AVAILABLE_MESSAGE"),
      buttons: [
        {
          text: this.translateService.instant("BUTTON_OK"),
          handler: () => { },
        },
      ],
    });
    await alert.present();
  }

  async alertUserInvitedOrder(ticket) {
    if (this.userProvider._infoUser.id == 2) {
      const confirm = await this.alertCtrl.create({
        header: this.messageText.titleValidateInvited,
        message: this.messageText.textValidateInvited,
        backdropDismiss: false,
        buttons: [
          {
            text: "Cancelar",
            handler: () => {
              if (this.cartProvider.storeType == "main") {
                this.router.navigate(["/app/tabs/shop"]);
              } else {
                this.router.navigate(["/shop/" + this.cartProvider.storeType]);
              }
            },
          },
          {
            text: "Registrarme",
            handler: () => {
              this.storage.remove("token");
              this.storage.remove("infoUser");
              this.navCtrl.navigateRoot("/welcome");
            },
          },
        ],
      });
      await confirm.present();
    } else {
      this.router.navigate(["/symbolic-ballot/" + ticket.id]);
    }
  }

  async alertUserMustFillData() {
    const confirm = await this.alertCtrl.create({
      header: this.messageText.titleCompleteProfle,
      message: this.messageText.textCompleteProfle,
      buttons: [
        {
          text: "Ok",
          handler: () => { },
        }
      ],
    });

    await confirm.present();
  }

  validateStoreDataAcademy() {
    if (this.cartProvider.storeType != "academy") {
      this.cartProvider.currentAcademyUserId = null;
    }
  }

}