// Angular Core
import { Component, OnDestroy, OnInit, Renderer2, Inject } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { DOCUMENT } from '@angular/common';

// RxJs
import { filter } from 'rxjs/operators';

// Services
import { SessionService } from './services/session/session.service';
import { DataTransmitterService } from './services/dataTransmitter/data-transmitter.service';
import { Subscription } from 'rxjs';
import { environment } from 'src/environments/environment';
import { datadogRum } from '@datadog/browser-rum';
import { ZendeskChatService } from './services/zendeskChat/zendesk-chat.service';

@Component({
  standalone: false,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {

  constructor(
    private router: Router, 
    private activatedRoute: ActivatedRoute,
    private titleService: Title, 
    private sessionService: SessionService,
    private dataTransmitter: DataTransmitterService,
    private zendeskChatService: ZendeskChatService,
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
    ) {}
  rederMe!: boolean;
  renderHeaderAndFooter!: boolean;
  sitenameListener!: Subscription;
  isProduction: boolean = environment.production;
  cdnLink: string = environment.cdnLink;

  restrictedPagesToShowHeaderAndFooter: string[] = [
    '/market/login',
    '/market/registration',
    '/market/storeInfo',
    '/market/questionnaire',
    '/market/eSign',
    '/market/payment',
    '/market/licenseVerification',
    '/market/accountVerify',
    '/market/content/terms',
    '/market/content/privacy'
  ];

  ngOnInit() {
    this.sessionService.checkGetAuthSession.subscribe((data: boolean) => {
        this.rederMe = data;
    });
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
    ).subscribe((event: any) => {
      this.restrictedPagesToShowHeaderAndFooter.includes(event.urlAfterRedirects) || event.urlAfterRedirects.startsWith("/market/admin/") ? this.renderHeaderAndFooter = false : this.renderHeaderAndFooter = true;
      this.zendeskChatService.loadZendeskWidgetScript();
      this.addGaJs();
      const rt = this.getChild(this.activatedRoute);
      rt.data.subscribe((data: ActivatedRoute['snapshot']['data']) => {
        this.sitenameListener = this.dataTransmitter.sitename.subscribe((sitename) => {
          this.titleService.setTitle(sitename + ' | '+ data['title']);
        });
      });
    });
    if (this.isProduction) {
      datadogRum.init({
        applicationId: '51c74c17-676e-42aa-8d21-a726f7c1e732',
        clientToken: 'pubcb5103e9cb5e75e660998da919dd25b6',
        // site refers to the Datadog site parameter of your organization
        // see https://docs.datadoghq.com/getting_started/site/ 
        site: 'us3.datadoghq.com',
        service: 'primerx-market',
        env: environment.name,
        // Specify a version number to identify the deployed version of your application in Datadog
        // version: '1.0.0',
        sessionSampleRate: 100,
        sessionReplaySampleRate: 20,
        trackUserInteractions: true,
        trackResources: true,
        trackLongTasks: true,
        defaultPrivacyLevel: 'mask-user-input',
      });
    }
  }

  getChild(activatedRoute: ActivatedRoute): ActivatedRoute {
    if (activatedRoute.firstChild) {
      return this.getChild(activatedRoute.firstChild);
    } else {
      return activatedRoute;
    }
  }
  
  ngOnDestroy(){
    this.sitenameListener.unsubscribe();
  }
  
  addGaJs() {
    let script = document.createElement('script');
    script.async = true;
    script.type = 'text/javascript';
    script.src = this.cdnLink + 'static/lib/googleAnalytics/ga.js';
    document.body.appendChild(script);
  }
}