import { Component, HostListener, inject, OnInit } from '@angular/core';
import { Router, ActivationEnd, NavigationStart, RouterOutlet, RouterModule } from '@angular/router';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { CronusService } from './services/cronus.service';
import { EndpointService } from './services/endpoint.service';

@Component({
  selector: 'app-root',
  imports: [ RouterOutlet, MatToolbarModule, MatButtonModule, MatMenuModule, RouterModule ],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App implements OnInit {
  readonly cronusService = inject(CronusService);
  readonly endpointService = inject(EndpointService);
  readonly router = inject(Router);


  constructor(){
    CronusService.NAV_STATE.originalTimestamp = Date.now();
  }

  async ngOnInit(): Promise<void> {
  }

  getScrollPercent() {
    if(typeof document=='undefined') return 0;
    let h: any = document.documentElement, 
        b: any = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  }

  ngAfterContentInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart){
        let params: any = {
          event: 'navigation.leave',
          data_s1: CronusService.NAV_STATE.page,
          data_n2: this.getScrollPercent(),
        };
        this.cronusService.log(params);
      }

      if (event instanceof ActivationEnd){
        let values = Object.values(event.snapshot.params);
        let params: any = {
          event: 'navigation.enter',
          data_s1: event.snapshot.routeConfig?.path,
        };
        let pidx: number = 0;
        if(event.snapshot.routeConfig?.data)
          for(let type of event.snapshot.routeConfig.data['pconf'] || [])
            switch (type) {
              case 'str':
                params[`data_s${pidx+2}`] = values[pidx++];
                break;

              case 'num':
                params[`data_n${pidx+2}`] = values[pidx++];
                break;

              default:
                break;
            }

        if(!CronusService.NAV_STATE.timestamp)
          this.cronusService.log({
            event: 'navigation.landing',
            seed: params.seed,
            originator: params.originator,
            data_s1: params.data_s1,
          });

        this.cronusService.log(params);

        CronusService.NAV_STATE.timestamp = Date.now();
        CronusService.NAV_STATE.page = params.data_s1;
      }
    });

    if(typeof document!='undefined')
      setTimeout(() => document.querySelector('body')!.classList.remove('loading'), 200);
  }

  @HostListener('window:beforeunload', ['$event'])
  public beforeunloadHandler($event: any) {
    this.cronusService.log({
      event: 'navigation.leave',
      data_s1: CronusService.NAV_STATE.page,
      data_n2: this.getScrollPercent(),
    }).catch(error => 'on leave');

    this.cronusService.log({
      event: 'navigation.unload',
      data_s1: CronusService.NAV_STATE.page,
    }).catch(error => 'on unload');
  }

  ngOnDestroy() {
    this.cronusService.log({
      event: 'navigation.OnDestroy',
      data_s1: CronusService.NAV_STATE.page,
    }).catch(error => 'on destroy');
  }
}