import { NetworkingService } from './services/networking/networking.service';
import { AnalyticsService } from './services/analytics.service';
import { Component } from "@angular/core";
import { Platform, MenuController, ModalController } from "@ionic/angular";
import { TranslateService } from "@ngx-translate/core";
import { DetailProductPage } from "./pages/detail-product/detail-product";
import { HomeService } from "./services/home.service";
import { CartService } from "./services/cart.service";
import { UtilsService } from "./services/utils.service";
import { Router } from "@angular/router";
import { SplashScreen } from '@capacitor/splash-screen';
import { StatusBar } from '@capacitor/status-bar';
import OneSignal from 'onesignal-cordova-plugin';
import { Capacitor } from '@capacitor/core';
import { InAppBrowser } from '@capgo/inappbrowser';
import { environment } from '../environments/environment';
import { UserService } from './services/user.service';

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.scss"],
  host: { '(click)': 'onClick($event)' }
})

export class AppComponent {
  showSplash = true;
  splashClass: string = "splashDay";
  hour: any;
  splash: any;
  constructor(
    private platform: Platform,
    private translate: TranslateService,
    public menu: MenuController,
    public modalCtrl: ModalController,
    public homeService: HomeService,
    public cartService: CartService,
    public utilsService: UtilsService,
    private router: Router,
    private analyticsService: AnalyticsService,
    public userProvider: UserService,
    private networkingService: NetworkingService
  ) {
    this.updateManifest();
    this.initializeApp();
  }

  ngOnInit() {
    this.platform.resume.subscribe(() => {
      this.userProvider.savePlayerOnesignal();
    });
  }

  initializeApp() {
    this.platform.ready().then(() => {
      SplashScreen.hide();
      this.menu.enable(false);

      // this.hour = new Date().getHours();
      // if (this.hour >= 18 && this.hour <= 23) {
      //   //Night
      //   this.splashClass = "splash splashNight";
      // } else if (this.hour >= 12 && this.hour <= 17) {
      //   //Afternoon
      //   this.splashClass = "splash splashAfternoon";
      // } else {
      //   //Day
      //   this.splashClass = "splash splashDay";
      // }

      // timer(3000).subscribe(() => {
      //   this.showSplash = false;
      // });
    });
    this.initTranslate();
    this.initMobileFunctions();
   
  }

  private onClick(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    var text = target.textContent || target.innerText;
    this.analyticsService.logEvent(text, target.tagName);
  }

  initMobileFunctions() {
    if (Capacitor.isNativePlatform()) {
      this.setStatusBar();
      this.oneSignalInit();
    }
  }

  setStatusBar() {
    StatusBar.setBackgroundColor({
      color: getComputedStyle(document.documentElement).getPropertyValue('--ion-color-primary-shade').replace('#', '')
    })
  }

  oneSignalInit(): void {
    OneSignal.initialize(environment.onesignalId);
    let self = this;
    let myClickListener = async function (event) {
      let payload = event.notification;
      self.analyticsService.logEvent('Notification Click', 'Notification', 'click', payload.body);

      InAppBrowser.close();
      self.utilsService.closeAllAlerts();
      self.router.navigate(["/notification"], { skipLocationChange: true });

      self.redirectToPage(payload);
    };


    let myLifecyleListener = function (event) {
      event.notification.display();
      self.reloadHome();
    }

    OneSignal.Notifications.addEventListener("click", myClickListener);
    OneSignal.Notifications.addEventListener("foregroundWillDisplay", myLifecyleListener);


    OneSignal.Notifications.requestPermission(true).then((accepted: boolean) => {
      console.log("User accepted notifications: " + accepted);
    });
  }

  reloadHome() {
    if (this.router.url.includes('home')) {
      this.router.routeReuseStrategy.shouldReuseRoute = function () { return false; };
      this.router.navigateByUrl(this.router.url + '?')
        .then(() => {
          this.router.navigated = false;
          this.router.navigate([this.router.url]);
        });
    }
  }

  redirectToPage(data) {
    let link = data.additionalData.link;
    if (link) {
      if (link.includes("http")) {
        this.utilsService.openLink(link);
      } else {
        this.router.navigate([link]);
      }
    }
  }

  initTranslate() {
    // Set the default language for translation strings, and the current language.
    this.translate.setDefaultLang("es");
    const browserLang = this.translate.getBrowserLang();

    if (browserLang) {
      this.translate.use(this.translate.getBrowserLang());
    } else {
      this.translate.use("es"); // Set your language here
    }
  }

  async openModalDetailProduct(product) {
    const modal = await this.modalCtrl.create({
      component: DetailProductPage,
      componentProps: { product },
    });
    await modal.present();
  }

  updateManifest() {
    const appName = environment.appName;
    // Fetch the manifest file and update the name field
    fetch('../manifest.webmanifest')
      .then(response => response.json())
      .then(manifest => {
        manifest.name = appName;
      });
  }
}